{"id":956,"date":"2026-02-17T06:30:14","date_gmt":"2026-02-17T06:30:14","guid":{"rendered":"https:\/\/intelligentcomputingtrends.com\/?page_id=956"},"modified":"2026-02-24T08:07:30","modified_gmt":"2026-02-24T08:07:30","slug":"user-manual","status":"publish","type":"page","link":"https:\/\/intelligentcomputingtrends.com\/en\/user-manual\/","title":{"rendered":"user manual"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"956\" class=\"elementor elementor-956\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d1136ae e-con-full e-flex e-con e-parent\" data-id=\"d1136ae\" data-element_type=\"container\" data-e-type=\"container\" data-no-translation=\"\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d8c148 elementor-widget elementor-widget-html\" data-id=\"1d8c148\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ========== USER MANUAL | ROLE SPLIT (Elementor-ready) ========== -->\r\n<section class=\"umx-roles\" id=\"um-roles\">\r\n  <header class=\"umx-roles__header\">\r\n    <h2 class=\"umx-roles__title\">Choose your area<\/h2>\r\n    <p class=\"umx-roles__subtitle\">\r\n      Start from the side that matches your role. You can always switch between views later.\r\n    <\/p>\r\n  <\/header>\r\n\r\n  <div class=\"umx-roles__grid\">\r\n    <!-- RETAILER -->\r\n    <article class=\"umx-card\" data-role=\"retailer\">\r\n      <div class=\"umx-card__bg\" aria-hidden=\"true\"><\/div>\r\n\r\n      <div class=\"umx-chip\">\r\n        <span class=\"umx-dot\" aria-hidden=\"true\"><\/span>\r\n        Retailer side\r\n      <\/div>\r\n\r\n      <h3 class=\"umx-card__title\">\r\n        <span>Retailer dashboard<\/span>\r\n        <span class=\"umx-emoji\" aria-hidden=\"true\">\ud83d\udce6<\/span>\r\n      <\/h3>\r\n\r\n      <p class=\"umx-card__text\">\r\n        For retailers. Set up order management and order tracking in Ecolos+.\r\n      <\/p>\r\n\r\n      <div class=\"umx-card__body\">\r\n        <h4 class=\"umx-subtitle\">You\u2019ll find<\/h4>\r\n        <ul class=\"umx-list\">\r\n          <li>Hub \/ terminal specification<\/li>\r\n          <li>Order status tracking<\/li>\r\n          <li>Order delivery statistics<\/li>\r\n        <\/ul>\r\n      <\/div>\r\n\r\n      <footer class=\"umx-card__footer\">\r\n        <a class=\"umx-btn\" href=\"#retailer-docs\">Go to retailer manual <span aria-hidden=\"true\">\u2192<\/span><\/a>\r\n        <span class=\"umx-meta\">Focus: order management &amp; tracking KPIs<\/span>\r\n      <\/footer>\r\n    <\/article>\r\n\r\n    <!-- TRANSPORTER -->\r\n    <article class=\"umx-card\" data-role=\"transporter\">\r\n      <div class=\"umx-card__bg\" aria-hidden=\"true\"><\/div>\r\n\r\n      <div class=\"umx-chip\">\r\n        <span class=\"umx-dot umx-dot--bondi\" aria-hidden=\"true\"><\/span>\r\n        Transporter side\r\n      <\/div>\r\n\r\n      <h3 class=\"umx-card__title\">\r\n        <span>Transporter &amp; operations dashboard<\/span>\r\n        <span class=\"umx-emoji\" aria-hidden=\"true\">\ud83d\ude9a<\/span>\r\n      <\/h3>\r\n\r\n      <p class=\"umx-card__text\">\r\n        For transporters and ops teams. Run hubs, routes and couriers in day-to-day operations.\r\n      <\/p>\r\n\r\n      <div class=\"umx-card__body\">\r\n        <h4 class=\"umx-subtitle\">You\u2019ll find<\/h4>\r\n        <ul class=\"umx-list\">\r\n          <li>Route generation &amp; planning<\/li>\r\n          <li>Hub data<\/li>\r\n          <li>Handling orders<\/li>\r\n          <li>Courier management<\/li>\r\n          <li>Vehicle specification<\/li>\r\n          <li>Log management for customer support<\/li>\r\n          <li>Order delivery statistics<\/li>\r\n        <\/ul>\r\n      <\/div>\r\n\r\n      <footer class=\"umx-card__footer\">\r\n        <a class=\"umx-btn\" href=\"#transporter-docs\">Go to transporter manual <span aria-hidden=\"true\">\u2192<\/span><\/a>\r\n        <span class=\"umx-meta\">Focus: hubs, routes &amp; daily operations<\/span>\r\n      <\/footer>\r\n    <\/article>\r\n\r\n    <!-- RECIPIENT APP -->\r\n    <article class=\"umx-card\" data-role=\"enduser-app\">\r\n      <div class=\"umx-card__bg\" aria-hidden=\"true\"><\/div>\r\n\r\n      <div class=\"umx-chip\">\r\n        <span class=\"umx-dot umx-dot--deep\" aria-hidden=\"true\"><\/span>\r\n        Recipient app\r\n      <\/div>\r\n\r\n      <h3 class=\"umx-card__title\">\r\n        <span>Recipient app<\/span>\r\n        <span class=\"umx-emoji\" aria-hidden=\"true\">\ud83d\udcf1<\/span>\r\n      <\/h3>\r\n\r\n      <p class=\"umx-card__text\">\r\n        For recipients. Show order tracking, delivery options and notifications in a mobile-first view.\r\n      <\/p>\r\n\r\n      <div class=\"umx-card__body\">\r\n        <h4 class=\"umx-subtitle\">You\u2019ll find<\/h4>\r\n        <ul class=\"umx-list\">\r\n          <li>Order tracking views<\/li>\r\n          <li>Delivery options &amp; time windows<\/li>\r\n          <li>Notifications \u2013 email, SMS &amp; push<\/li>\r\n        <\/ul>\r\n      <\/div>\r\n\r\n      <footer class=\"umx-card__footer\">\r\n        <a class=\"umx-btn\" href=\"#customer-app-docs\">Go to end-user app manual <span aria-hidden=\"true\">\u2192<\/span><\/a>\r\n        <span class=\"umx-meta\">Includes: tracking, delivery options &amp; notifications<\/span>\r\n      <\/footer>\r\n    <\/article>\r\n\r\n    <!-- COURIER APP -->\r\n    <article class=\"umx-card\" data-role=\"courier-app\">\r\n      <div class=\"umx-card__bg\" aria-hidden=\"true\"><\/div>\r\n\r\n      <div class=\"umx-chip\">\r\n        <span class=\"umx-dot umx-dot--bondi\" aria-hidden=\"true\"><\/span>\r\n        Courier app\r\n      <\/div>\r\n\r\n      <h3 class=\"umx-card__title\">\r\n        <span>Courier app<\/span>\r\n        <span class=\"umx-emoji\" aria-hidden=\"true\">\ud83d\udcf2<\/span>\r\n      <\/h3>\r\n\r\n      <p class=\"umx-card__text\">\r\n        For couriers and delivery teams. Manage missions, proof-of-delivery and live exceptions on the go.\r\n      <\/p>\r\n\r\n      <div class=\"umx-card__body\">\r\n        <h4 class=\"umx-subtitle\">You\u2019ll find<\/h4>\r\n        <ul class=\"umx-list\">\r\n          <li>Missions &amp; routes<\/li>\r\n          <li>Proof-of-delivery (POD)<\/li>\r\n          <li>Live exceptions &amp; alerts<\/li>\r\n        <\/ul>\r\n      <\/div>\r\n\r\n      <footer class=\"umx-card__footer\">\r\n        <a class=\"umx-btn\" href=\"#courier-app-docs\">Go to courier app manual <span aria-hidden=\"true\">\u2192<\/span><\/a>\r\n        <span class=\"umx-meta\">Includes: missions, POD &amp; live alerts<\/span>\r\n      <\/footer>\r\n    <\/article>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  \/* Elementor-safe: everything scoped under .umx-roles *\/\r\n  .umx-roles{\r\n    \/* IMPORTANT: do not set body background in Elementor *\/\r\n    padding: 18px;\r\n    border-radius: 28px;\r\n    border: 1px dashed rgba(244,246,248,.45);\r\n    background: rgba(255,255,255,.06);\r\n    box-shadow: 0 14px 34px rgba(0,0,0,.18);\r\n    color: #fff;\r\n  }\r\n\r\n  .umx-roles *{ box-sizing:border-box; }\r\n\r\n  .umx-roles__header{\r\n    display:flex;\r\n    align-items:flex-start;\r\n    justify-content:space-between;\r\n    gap:12px;\r\n    flex-wrap:wrap;\r\n    margin-bottom: 14px;\r\n  }\r\n\r\n  .umx-roles__title{\r\n    margin:0;\r\n    font-size: 18px;\r\n    color: rgba(255,255,255,.95);\r\n    letter-spacing:.04em;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .umx-roles__subtitle{\r\n    margin:6px 0 0;\r\n    font-size: 13px;\r\n    color: rgba(255,255,255,.75);\r\n    max-width: 720px;\r\n  }\r\n\r\n  .umx-roles__grid{\r\n    margin-top: 12px;\r\n    display:grid;\r\n    grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    gap: 14px;\r\n  }\r\n\r\n  .umx-card{\r\n    position:relative;\r\n    overflow:hidden;\r\n    border-radius: 28px;\r\n    padding: 16px;\r\n    border: 1px solid rgba(244,246,248,.16);\r\n    background: rgba(6,37,52,.42);\r\n    box-shadow: 0 18px 44px rgba(0,0,0,.20);\r\n    display:flex;\r\n    flex-direction:column;\r\n    min-height: 240px;\r\n    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;\r\n  }\r\n\r\n  .umx-card:hover{\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 22px 54px rgba(0,0,0,.26);\r\n    border-color: rgba(0,208,156,.35);\r\n  }\r\n\r\n  .umx-card:focus-within{\r\n    box-shadow: 0 22px 54px rgba(0,0,0,.26), 0 0 0 4px rgba(0,208,156,.25);\r\n    border-color: rgba(0,208,156,.45);\r\n  }\r\n\r\n  .umx-card__bg{\r\n    position:absolute;\r\n    inset:0;\r\n    pointer-events:none;\r\n    opacity:.65;\r\n    mix-blend-mode: screen;\r\n  }\r\n\r\n  \/* Brand palette accents per role *\/\r\n  .umx-card[data-role=\"retailer\"] .umx-card__bg{\r\n    background: radial-gradient(circle at 78% 10%, rgba(0,208,156,.35), transparent 58%);\r\n  }\r\n  .umx-card[data-role=\"transporter\"] .umx-card__bg{\r\n    background: radial-gradient(circle at 78% 10%, rgba(3,150,166,.35), transparent 58%);\r\n  }\r\n  .umx-card[data-role=\"enduser-app\"] .umx-card__bg{\r\n    background: radial-gradient(circle at 78% 10%, rgba(15,44,62,.55), transparent 62%);\r\n  }\r\n  .umx-card[data-role=\"courier-app\"] .umx-card__bg{\r\n    background:\r\n      radial-gradient(circle at 78% 10%, rgba(0,208,156,.26), transparent 60%),\r\n      radial-gradient(circle at 35% 0%, rgba(3,150,166,.22), transparent 58%);\r\n  }\r\n\r\n  .umx-chip{\r\n    position:relative;\r\n    display:inline-flex;\r\n    align-items:center;\r\n    gap:8px;\r\n    padding: 6px 10px;\r\n    border-radius: 999px;\r\n    border: 1px solid rgba(244,246,248,.18);\r\n    background: rgba(255,255,255,.06);\r\n    font-size: 11px;\r\n    letter-spacing: .12em;\r\n    text-transform: uppercase;\r\n    width:max-content;\r\n    margin-bottom: 10px;\r\n    color: rgba(255,255,255,.88);\r\n  }\r\n\r\n  .umx-dot{\r\n    width:8px;height:8px;border-radius:999px;\r\n    background: #00D09C; \/* Mint Leaf *\/\r\n    box-shadow: 0 0 0 4px rgba(0,208,156,.18);\r\n    flex:0 0 auto;\r\n  }\r\n  .umx-dot--bondi{\r\n    background:#0396a6; \/* Bondi Blue *\/\r\n    box-shadow: 0 0 0 4px rgba(3,150,166,.18);\r\n  }\r\n  .umx-dot--deep{\r\n    background:#0F2C3E; \/* Deep Space Blue *\/\r\n    box-shadow: 0 0 0 4px rgba(15,44,62,.22);\r\n  }\r\n\r\n  .umx-card__title{\r\n    position:relative;\r\n    margin:0 0 6px;\r\n    font-size: 16px;\r\n    color: rgba(255,255,255,.95);\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:space-between;\r\n    gap:10px;\r\n  }\r\n  .umx-emoji{ font-size:18px; }\r\n\r\n  .umx-card__text{\r\n    position:relative;\r\n    margin:0 0 12px;\r\n    font-size: 13px;\r\n    color: rgba(255,255,255,.78);\r\n    max-width: 64ch;\r\n  }\r\n\r\n  .umx-card__body{ position:relative; }\r\n\r\n  .umx-subtitle{\r\n    margin:0 0 6px;\r\n    font-size: 12px;\r\n    color: rgba(255,255,255,.75);\r\n    letter-spacing: .10em;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  .umx-list{\r\n    margin:0;\r\n    padding-left: 18px;\r\n    font-size: 12.5px;\r\n    color: rgba(255,255,255,.78);\r\n  }\r\n  .umx-list li{ margin:4px 0; }\r\n\r\n  .umx-card__footer{\r\n    position:relative;\r\n    margin-top:auto;\r\n    padding-top: 10px;\r\n    border-top: 1px dashed rgba(244,246,248,.18);\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:space-between;\r\n    gap:10px;\r\n    flex-wrap:wrap;\r\n  }\r\n\r\n  .umx-btn{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    gap:10px;\r\n    padding: 10px 14px;\r\n    border-radius: 999px;\r\n    font-size: 13px;\r\n    border: 1px solid transparent;\r\n    background: linear-gradient(135deg, #00D09C, #0396a6); \/* Gradient 2 *\/\r\n    color: #FFFFFF;\r\n    box-shadow: 0 16px 40px rgba(3,150,166,.22);\r\n    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;\r\n    white-space:nowrap;\r\n  }\r\n  .umx-btn:hover{\r\n    transform: translateY(-1px);\r\n    box-shadow: 0 20px 50px rgba(3,150,166,.28);\r\n    filter:saturate(1.05);\r\n  }\r\n  .umx-btn:focus-visible{\r\n    outline:none;\r\n    box-shadow: 0 20px 50px rgba(3,150,166,.28), 0 0 0 4px rgba(0,208,156,.25);\r\n  }\r\n\r\n  .umx-meta{\r\n    font-size: 11.5px;\r\n    color: rgba(255,255,255,.62);\r\n    max-width: 38ch;\r\n  }\r\n\r\n  \/* Responsive *\/\r\n  @media (max-width: 900px){\r\n    .umx-roles__grid{ grid-template-columns: 1fr; }\r\n  }\r\n<\/style>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-080655f e-flex e-con-boxed e-con e-parent\" data-id=\"080655f\" data-element_type=\"container\" data-e-type=\"container\" data-no-translation=\"\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dc2ea45 elementor-widget elementor-widget-html\" data-id=\"dc2ea45\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ========== USER MANUAL | RETAILER DOCS (Elementor-ready) ========== -->\r\n<section class=\"umx-doc\" id=\"retailer-docs\">\r\n  <header class=\"umx-doc__head\">\r\n    <div>\r\n      <h2 class=\"umx-doc__title\">Retailer dashboard \u2013 documentation<\/h2>\r\n      <p class=\"umx-doc__subtitle\">\r\n        Regions, hubs, orders, bulk imports and statistics on the retailer side of Ecolos+.\r\n      <\/p>\r\n    <\/div>\r\n    <span class=\"umx-badge\">Retailer<\/span>\r\n  <\/header>\r\n\r\n  <div class=\"umx-acc\" data-umx-acc>\r\n    <!-- REGION -->\r\n    <article class=\"umx-acc__item\" id=\"retailer-region-doc\" data-doc-card=\"true\">\r\n      <button class=\"umx-acc__btn\" type=\"button\" aria-expanded=\"false\" aria-controls=\"retailer-region-body\">\r\n        <div class=\"umx-acc__main\">\r\n          <h3 class=\"umx-acc__name\">Region<\/h3>\r\n          <p class=\"umx-acc__desc\">Create and update regions for your operations.<\/p>\r\n        <\/div>\r\n        <div class=\"umx-acc__right\">\r\n          <span class=\"umx-chip\">Add \u00b7 Edit<\/span>\r\n          <span class=\"umx-caret\" aria-hidden=\"true\">\u25be<\/span>\r\n        <\/div>\r\n      <\/button>\r\n\r\n      <div class=\"umx-acc__panel\" id=\"retailer-region-body\" hidden>\r\n        <p class=\"umx-p\">\r\n          A <strong>region<\/strong> in Ecolos+ is a geographical area that can be a single city,\r\n          several cities or part of a city. When creating a region, you first pick the\r\n          <strong>country<\/strong>, then choose one or more cities or you can define it as a polygon on the map.\r\n        <\/p>\r\n\r\n        <h4 class=\"umx-h4\">How to add a region<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>In the left-hand navigation, click <strong>Regions<\/strong>.<\/li>\r\n          <li>On the <strong>Regions<\/strong> page, click <strong>Add region<\/strong> (top-right).<\/li>\r\n          <li>\r\n            In <strong>Add Region<\/strong>, fill in:\r\n            <ul class=\"umx-ul\">\r\n              <li><strong>Name<\/strong> \u2013 internal name (e.g. \u201cStockholm\u201d, \u201cSouth Sweden\u201d).<\/li>\r\n              <li><strong>Country &amp; cities<\/strong> \u2013 select country, then one or more cities.<\/li>\r\n              <li><strong>Map area<\/strong> \u2013 select the area on the map (full city \/ multiple \/ part).<\/li>\r\n            <\/ul>\r\n          <\/li>\r\n          <li>Click <strong>Save<\/strong> to create the region.<\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">How to edit a region<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>In the left-hand navigation, click <strong>Regions<\/strong>.<\/li>\r\n          <li>Find the region you want to change.<\/li>\r\n          <li>Click <strong>Edit<\/strong> for that region.<\/li>\r\n          <li>Update <strong>Name<\/strong>, <strong>Country &amp; cities<\/strong> or <strong>map area<\/strong>.<\/li>\r\n          <li>Click <strong>Save<\/strong> to apply changes.<\/li>\r\n        <\/ol>\r\n\r\n        <div class=\"umx-note\">\r\n          <strong>Tip:<\/strong> keep region names and selected cities consistent so they\u2019re easy to reuse in hubs,\r\n          orders and statistics filters.\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- HUB -->\r\n    <article class=\"umx-acc__item\" id=\"retailer-hub-doc\" data-doc-card=\"true\">\r\n      <button class=\"umx-acc__btn\" type=\"button\" aria-expanded=\"false\" aria-controls=\"retailer-hub-body\">\r\n        <div class=\"umx-acc__main\">\r\n          <h3 class=\"umx-acc__name\">Hubs<\/h3>\r\n          <p class=\"umx-acc__desc\">Create and update hubs in your network.<\/p>\r\n        <\/div>\r\n        <div class=\"umx-acc__right\">\r\n          <span class=\"umx-chip\">Add \u00b7 Edit<\/span>\r\n          <span class=\"umx-caret\" aria-hidden=\"true\">\u25be<\/span>\r\n        <\/div>\r\n      <\/button>\r\n\r\n      <div class=\"umx-acc__panel\" id=\"retailer-hub-body\" hidden>\r\n        <p class=\"umx-p\">\r\n          A <strong>hub<\/strong> is a terminal or warehouse where routes start and end.\r\n        <\/p>\r\n\r\n        <h4 class=\"umx-h4\">How to add a hub<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>In the left-hand navigation, click <strong>Hubs<\/strong>.<\/li>\r\n          <li>On the <strong>Hubs<\/strong> page, click <strong>Add hub<\/strong> (top-right).<\/li>\r\n          <li>\r\n            In <strong>Details<\/strong>, fill in:\r\n            <ul class=\"umx-ul\">\r\n              <li><strong>Name<\/strong> \u2013 hub name users will see.<\/li>\r\n              <li><strong>Region<\/strong> \u2013 choose which region this hub belongs to.<\/li>\r\n              <li><strong>Weight capacity<\/strong> and <strong>Volume capacity<\/strong> \u2013 optional limits.<\/li>\r\n            <\/ul>\r\n          <\/li>\r\n          <li>In <strong>Search address<\/strong>, type the hub address (map pin updates).<\/li>\r\n          <li>(Optional) Tick <strong>Vehicles should return to the hub<\/strong>.<\/li>\r\n          <li>\r\n            In <strong>Shifts<\/strong>, click <strong>Add shift<\/strong> and set hub operating time windows.\r\n            <br \/><em>Important:<\/em> shifts must <strong>not overlap<\/strong>.\r\n          <\/li>\r\n          <li>\r\n            Under <strong>Parcel types<\/strong>, select the types this hub can handle\r\n            (e.g. <em>Regular<\/em>, <em>Eco<\/em>, <em>Large<\/em>, <em>Cold<\/em>).\r\n          <\/li>\r\n          <li>Set <strong>Max available vehicles<\/strong> if you want to limit concurrent vehicles.<\/li>\r\n          <li>Click <strong>Save<\/strong> to create the hub.<\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">How to edit a hub<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>In the left-hand navigation, click <strong>Hubs<\/strong>.<\/li>\r\n          <li>Find the hub you want to change.<\/li>\r\n          <li>Click <strong>Edit<\/strong> on the left side of that hub row.<\/li>\r\n          <li>Update fields (name, region, address, capacities, shifts, parcel types, max vehicles).<\/li>\r\n          <li>\r\n            For <strong>shifts<\/strong>: you can add new time windows anytime. Editing\/deleting an existing shift\r\n            is only possible if no orders are assigned. Otherwise create a new shift.\r\n          <\/li>\r\n          <li>Click <strong>Save<\/strong> to apply changes.<\/li>\r\n        <\/ol>\r\n\r\n        <div class=\"umx-note\">\r\n          <strong>Tip:<\/strong> changing hub settings (especially region, address or capacities) can impact routing and\r\n          statistics\u2014make sure values reflect real operations.\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- ORDERS -->\r\n    <article class=\"umx-acc__item\" id=\"retailer-order-doc\" data-doc-card=\"true\">\r\n      <button class=\"umx-acc__btn\" type=\"button\" aria-expanded=\"false\" aria-controls=\"retailer-order-body\">\r\n        <div class=\"umx-acc__main\">\r\n          <h3 class=\"umx-acc__name\">Orders<\/h3>\r\n          <p class=\"umx-acc__desc\">Create, edit and search single retailer orders.<\/p>\r\n        <\/div>\r\n        <div class=\"umx-acc__right\">\r\n          <span class=\"umx-chip\">Create \u00b7 Edit \u00b7 Search<\/span>\r\n          <span class=\"umx-caret\" aria-hidden=\"true\">\u25be<\/span>\r\n        <\/div>\r\n      <\/button>\r\n\r\n      <div class=\"umx-acc__panel\" id=\"retailer-order-body\" hidden>\r\n        <p class=\"umx-p\">\r\n          An <strong>order<\/strong> in Ecolos+ represents one parcel. The order can be:\r\n          a <strong>delivery<\/strong> from a hub to a recipient or a\r\n          <strong>pickup<\/strong> from a recipient that is returned to the hub.\r\n        <\/p>\r\n\r\n        <p class=\"umx-p\">You can add orders in three ways:<\/p>\r\n        <ul class=\"umx-ul\">\r\n          <li>One by one using <strong>Add an Order<\/strong> in the dashboard.<\/li>\r\n          <li>In bulk using <strong>Import Orders<\/strong> (see Bulk orders).<\/li>\r\n          <li>By integrating your system with the Ecolos+ <strong>API<\/strong>.<\/li>\r\n        <\/ul>\r\n\r\n        <h4 class=\"umx-h4\">How to create an order<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>In the left-hand navigation, click <strong>Orders<\/strong>.<\/li>\r\n          <li>On the <strong>Orders<\/strong> page, click <strong>Add an Order<\/strong> (top-right).<\/li>\r\n          <li>\r\n            In <strong>Add Order<\/strong> \u2192 <strong>Details<\/strong>, fill:\r\n            <ul class=\"umx-ul\">\r\n              <li><strong>Name<\/strong> \u2013 internal reference.<\/li>\r\n              <li><strong>Region<\/strong> \u2013 select region for this delivery.<\/li>\r\n              <li><strong>Select Hub<\/strong> \u2013 choose the distribution hub.<\/li>\r\n              <li><strong>Parcel Type<\/strong> \u2013 choose the parcel type.<\/li>\r\n            <\/ul>\r\n          <\/li>\r\n          <li>\r\n            Under <strong>Date and Time<\/strong>:\r\n            <ul class=\"umx-ul\">\r\n              <li><strong>Delivery date<\/strong> \u2013 planned day.<\/li>\r\n              <li><strong>Shift<\/strong> \u2013 choose hub shift (e.g. <code>08:00<\/code>\u2013<code>16:00<\/code>).<\/li>\r\n              <li>\r\n                <strong>Earliest time<\/strong> and <strong>Latest time<\/strong> must be inside the selected shift.\r\n                Example: shift <code>08:00\u201316:00<\/code> allows <code>09:00\u201312:00<\/code>, but not <code>07:30\u201309:00<\/code>.\r\n              <\/li>\r\n            <\/ul>\r\n          <\/li>\r\n          <li>\r\n            In <strong>Recipient<\/strong>, fill contact & address details:\r\n            <ul class=\"umx-ul\">\r\n              <li><strong>Email<\/strong> and <strong>Phone<\/strong>.<\/li>\r\n              <li><strong>Firstname<\/strong>, <strong>Middlename<\/strong> (optional), <strong>Lastname<\/strong>.<\/li>\r\n              <li><strong>Address<\/strong>, <strong>Type of building<\/strong>, <strong>Floor<\/strong>, <strong>Unit No.<\/strong> if needed.<\/li>\r\n            <\/ul>\r\n            The <strong>Location<\/strong> map shows the delivery point. You can adjust the pin and then verify the address.\r\n            If the <strong>email<\/strong> already exists, recipient details may be overwritten; a new email creates a new recipient.\r\n          <\/li>\r\n          <li>\r\n            In <strong>Delivery options<\/strong>, tick applicable options\r\n            (e.g. <em>Need ID<\/em>, <em>Need sign<\/em>, <em>Need ring<\/em>, <em>Door code exists<\/em>\u2026).\r\n          <\/li>\r\n          <li>Under <strong>Order type<\/strong>, choose <strong>Delivery<\/strong> or <strong>Return<\/strong>.<\/li>\r\n          <li>In <strong>Specification<\/strong>, add details like <strong>Barcode<\/strong>, <strong>Weight<\/strong>, <strong>Volume<\/strong>.<\/li>\r\n          <li>Click <strong>Save<\/strong> to create the order.<\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">How to edit an order<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>In the left-hand navigation, click <strong>Orders<\/strong>.<\/li>\r\n          <li>Find the order you want to change.<\/li>\r\n          <li>Click <strong>Edit<\/strong>.<\/li>\r\n          <li>Update the fields you need (time, recipient, options, specification).<\/li>\r\n          <li>Click <strong>Save<\/strong>.<\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">How to search and filter orders<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>In the left-hand navigation, click <strong>Orders<\/strong>.<\/li>\r\n          <li>Use the <strong>Filter Orders<\/strong> panel at the top.<\/li>\r\n          <li>\r\n            Set filters like:\r\n            <ul class=\"umx-ul\">\r\n              <li><strong>Delivery date<\/strong><\/li>\r\n              <li><strong>Distribution hub<\/strong><\/li>\r\n              <li><strong>Delivery shifts<\/strong><\/li>\r\n              <li><strong>Order status<\/strong><\/li>\r\n              <li><strong>Parcel type<\/strong><\/li>\r\n            <\/ul>\r\n          <\/li>\r\n          <li>The list updates to show only matching orders.<\/li>\r\n        <\/ol>\r\n\r\n        <div class=\"umx-note\">\r\n          <strong>Tip:<\/strong> for troubleshooting, combine filters (date + hub + status) to narrow results fast.\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- BULK ORDERS -->\r\n    <article class=\"umx-acc__item\" id=\"retailer-bulk-orders-doc\" data-doc-card=\"true\">\r\n      <button class=\"umx-acc__btn\" type=\"button\" aria-expanded=\"false\" aria-controls=\"retailer-bulk-body\">\r\n        <div class=\"umx-acc__main\">\r\n          <h3 class=\"umx-acc__name\">Bulk orders<\/h3>\r\n          <p class=\"umx-acc__desc\">Import many retailer orders at once from a file.<\/p>\r\n        <\/div>\r\n        <div class=\"umx-acc__right\">\r\n          <span class=\"umx-chip\">Upload (Import orders)<\/span>\r\n          <span class=\"umx-caret\" aria-hidden=\"true\">\u25be<\/span>\r\n        <\/div>\r\n      <\/button>\r\n\r\n      <div class=\"umx-acc__panel\" id=\"retailer-bulk-body\" hidden>\r\n        <h4 class=\"umx-h4\">How to import bulk orders<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>In the left-hand navigation, click <strong>Orders<\/strong>.<\/li>\r\n          <li>Click <strong>Import Orders<\/strong> (top-right).<\/li>\r\n          <li>Select the correct <strong>Region<\/strong> and <strong>Hub<\/strong>.<\/li>\r\n          <li>\r\n            Click the upload area (or drag & drop) and choose your <strong>JSON<\/strong> or <strong>CSV<\/strong> file.\r\n          <\/li>\r\n          <li>\r\n            The system validates the file. If the structure is wrong, you\u2019ll see an error.\r\n            Use the on-page sample <strong>CSV<\/strong>\/<strong>JSON<\/strong> formats as reference.\r\n          <\/li>\r\n        <\/ol>\r\n\r\n        <div class=\"umx-callout\">\r\n          <strong>Template:<\/strong>\r\n          <a class=\"umx-link\" href=\"https:\/\/ecolosplus.se\/wp-content\/uploads\/Required_fields_and_description.xlsx\" target=\"_blank\" rel=\"noopener\">\r\n            Required_fields_and_description.xlsx\r\n          <\/a>\r\n        <\/div>\r\n\r\n        <div class=\"umx-note\">\r\n          <strong>Note:<\/strong> the file must contain a list of orders \u2013 either a <strong>CSV<\/strong> with columns similar\r\n          to the sample table, or a <strong>JSON array<\/strong> of objects with the same fields.\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- STATISTICS -->\r\n    <article class=\"umx-acc__item\" id=\"retailer-statistics-doc\" data-doc-card=\"true\">\r\n      <button class=\"umx-acc__btn\" type=\"button\" aria-expanded=\"false\" aria-controls=\"retailer-stats-body\">\r\n        <div class=\"umx-acc__main\">\r\n          <h3 class=\"umx-acc__name\">Statistics<\/h3>\r\n          <p class=\"umx-acc__desc\">View daily and overall performance for hubs.<\/p>\r\n        <\/div>\r\n        <div class=\"umx-acc__right\">\r\n          <span class=\"umx-chip\">Dashboards<\/span>\r\n          <span class=\"umx-caret\" aria-hidden=\"true\">\u25be<\/span>\r\n        <\/div>\r\n      <\/button>\r\n\r\n      <div class=\"umx-acc__panel\" id=\"retailer-stats-body\" hidden>\r\n        <h4 class=\"umx-h4\">Daily statistics<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>In the left-hand navigation, click <strong>Statistics<\/strong>.<\/li>\r\n          <li>Select the <strong>Daily statistics<\/strong> tab.<\/li>\r\n          <li>\r\n            Set filters:\r\n            <ul class=\"umx-ul\">\r\n              <li><strong>Choose a hub<\/strong> \u2013 select hub to analyse.<\/li>\r\n              <li><strong>Date<\/strong> \u2013 pick delivery date.<\/li>\r\n              <li><strong>Choose shifts<\/strong> \u2013 optionally limit to shifts.<\/li>\r\n            <\/ul>\r\n          <\/li>\r\n          <li>Click <strong>View stats<\/strong> to load daily KPIs.<\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">Overall statistics (date range)<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>Go to <strong>Statistics<\/strong> \u2192 <strong>Overall statistics<\/strong>.<\/li>\r\n          <li>Select a hub in <strong>Choose a hub<\/strong>.<\/li>\r\n          <li>\r\n            Set the date range:\r\n            <ul class=\"umx-ul\">\r\n              <li><strong>Start date<\/strong> \u2013 first day of the period.<\/li>\r\n              <li>\r\n                <strong>End date<\/strong> \u2013 last day of the period.\r\n                <br \/><em>Important:<\/em> must be earlier than today (up to yesterday).\r\n              <\/li>\r\n            <\/ul>\r\n            You can also use the quick presets (Today, Yesterday, This week, Last 7 days, etc.).\r\n          <\/li>\r\n          <li>Optionally choose one or more <strong>shifts<\/strong>.<\/li>\r\n          <li>Click <strong>View stats<\/strong> to load aggregated KPIs.<\/li>\r\n        <\/ol>\r\n\r\n        <div class=\"umx-note\">\r\n          <strong>Tip:<\/strong> use daily stats for troubleshooting specific days, and overall stats to follow longer trends.\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  \/* ========== BRAND TOKENS (scoped) ========== *\/\r\n  .umx-doc{\r\n    --deep:#0F2C3E;\r\n    --mint:#00D09C;\r\n    --bondi:#0396a6;\r\n    --white:#FFFFFF;\r\n    --platinum:#F4F6F8;\r\n\r\n    --g2: linear-gradient(135deg, var(--mint), var(--bondi));\r\n    --border: rgba(244,246,248,.18);\r\n    --soft: rgba(255,255,255,.06);\r\n    --soft2: rgba(6,37,52,.42);\r\n    --text: rgba(255,255,255,.92);\r\n    --muted: rgba(255,255,255,.72);\r\n\r\n    padding: 18px;\r\n    border-radius: 28px;\r\n    border: 1px dashed rgba(244,246,248,.45);\r\n    background: var(--soft);\r\n    box-shadow: 0 14px 34px rgba(0,0,0,.18);\r\n    color: var(--text);\r\n  }\r\n  .umx-doc *{ box-sizing:border-box; }\r\n\r\n  \/* ========== Header ========== *\/\r\n  .umx-doc__head{\r\n    display:flex;\r\n    align-items:flex-start;\r\n    justify-content:space-between;\r\n    gap:12px;\r\n    flex-wrap:wrap;\r\n    margin-bottom: 14px;\r\n  }\r\n  .umx-doc__title{\r\n    margin:0;\r\n    font-size: 18px;\r\n    letter-spacing:.04em;\r\n    text-transform: uppercase;\r\n    color: var(--text);\r\n  }\r\n  .umx-doc__subtitle{\r\n    margin: 6px 0 0;\r\n    font-size: 13px;\r\n    color: var(--muted);\r\n    max-width: 820px;\r\n  }\r\n  .umx-badge{\r\n    font-size: 11px;\r\n    padding: 6px 10px;\r\n    border-radius: 999px;\r\n    border: 1px solid rgba(244,246,248,.18);\r\n    background: rgba(255,255,255,.06);\r\n    color: rgba(255,255,255,.86);\r\n    white-space:nowrap;\r\n  }\r\n\r\n  \/* ========== Accordion ========== *\/\r\n  .umx-acc{\r\n    display:flex;\r\n    flex-direction:column;\r\n    gap: 12px;\r\n    margin-top: 12px;\r\n  }\r\n\r\n  .umx-acc__item{\r\n    border-radius: 22px;\r\n    border: 1px solid var(--border);\r\n    background: var(--soft2);\r\n    box-shadow: 0 16px 40px rgba(0,0,0,.18);\r\n    overflow:hidden;\r\n  }\r\n\r\n  .umx-acc__btn{\r\n    width:100%;\r\n    text-align:left;\r\n    border:0;\r\n    background:transparent;\r\n    color:inherit;\r\n    cursor:pointer;\r\n    padding: 14px 14px;\r\n    display:flex;\r\n    align-items:flex-start;\r\n    justify-content:space-between;\r\n    gap: 12px;\r\n  }\r\n\r\n  .umx-acc__btn:focus-visible{\r\n    outline:none;\r\n    box-shadow: 0 0 0 4px rgba(0,208,156,.22) inset;\r\n  }\r\n\r\n  .umx-acc__main{ min-width: 0; }\r\n  .umx-acc__name{\r\n    margin:0;\r\n    font-size: 15px;\r\n    color: rgba(255,255,255,.95);\r\n  }\r\n  .umx-acc__desc{\r\n    margin: 4px 0 0;\r\n    font-size: 12.5px;\r\n    color: rgba(255,255,255,.70);\r\n  }\r\n\r\n  .umx-acc__right{\r\n    display:flex;\r\n    align-items:center;\r\n    gap:10px;\r\n    flex: 0 0 auto;\r\n  }\r\n\r\n  .umx-chip{\r\n    font-size: 11px;\r\n    padding: 6px 10px;\r\n    border-radius: 999px;\r\n    border: 1px solid rgba(244,246,248,.16);\r\n    background: rgba(255,255,255,.06);\r\n    color: rgba(255,255,255,.86);\r\n    white-space:nowrap;\r\n  }\r\n\r\n  .umx-caret{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    width: 32px;\r\n    height: 32px;\r\n    border-radius: 999px;\r\n    border: 1px solid rgba(244,246,248,.14);\r\n    background: rgba(255,255,255,.06);\r\n    color: rgba(255,255,255,.9);\r\n    transition: transform .18s ease;\r\n    user-select:none;\r\n  }\r\n\r\n  .umx-acc__btn[aria-expanded=\"true\"] .umx-caret{\r\n    transform: rotate(180deg);\r\n  }\r\n\r\n  .umx-acc__panel{\r\n    padding: 0 14px 14px;\r\n    border-top: 1px dashed rgba(244,246,248,.16);\r\n  }\r\n\r\n  \/* ========== Typo inside panels ========== *\/\r\n  .umx-p{\r\n    margin: 12px 0 10px;\r\n    font-size: 12.8px;\r\n    color: rgba(255,255,255,.78);\r\n  }\r\n\r\n  .umx-h4{\r\n    margin: 10px 0 6px;\r\n    font-size: 13px;\r\n    color: rgba(255,255,255,.92);\r\n    letter-spacing:.02em;\r\n  }\r\n\r\n  .umx-ol{\r\n    margin: 0 0 10px 18px;\r\n    padding: 0;\r\n    font-size: 12.5px;\r\n    color: rgba(255,255,255,.78);\r\n  }\r\n  .umx-ol li{ margin: 6px 0; }\r\n\r\n  .umx-ul{\r\n    margin: 6px 0 0 16px;\r\n    padding: 0;\r\n    font-size: 12.5px;\r\n    color: rgba(255,255,255,.78);\r\n  }\r\n  .umx-ul li{ margin: 4px 0; }\r\n\r\n  .umx-note{\r\n    margin-top: 10px;\r\n    padding: 10px 12px;\r\n    border-radius: 16px;\r\n    border: 1px solid rgba(0,208,156,.22);\r\n    background: rgba(0,208,156,.10);\r\n    color: rgba(255,255,255,.88);\r\n    font-size: 12.5px;\r\n  }\r\n\r\n  .umx-callout{\r\n    margin-top: 10px;\r\n    padding: 10px 12px;\r\n    border-radius: 16px;\r\n    border: 1px solid rgba(3,150,166,.22);\r\n    background: rgba(3,150,166,.10);\r\n    color: rgba(255,255,255,.90);\r\n    font-size: 12.5px;\r\n  }\r\n\r\n  .umx-link{\r\n    color: rgba(255,255,255,.95);\r\n    text-decoration: underline;\r\n    text-decoration-thickness: 1px;\r\n    text-underline-offset: 3px;\r\n  }\r\n\r\n  \/* Code styling *\/\r\n  .umx-doc code{\r\n    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\r\n    font-size: 0.95em;\r\n    padding: 2px 6px;\r\n    border-radius: 999px;\r\n    border: 1px solid rgba(244,246,248,.14);\r\n    background: rgba(255,255,255,.08);\r\n    color: rgba(255,255,255,.92);\r\n    white-space: nowrap;\r\n  }\r\n\r\n  \/* Responsive *\/\r\n  @media (max-width: 900px){\r\n    .umx-acc__btn{ padding: 12px; }\r\n    .umx-acc__panel{ padding: 0 12px 12px; }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  (function(){\r\n    const root = document.querySelector('#retailer-docs');\r\n    if(!root) return;\r\n\r\n    const items = root.querySelectorAll('.umx-acc__item');\r\n    items.forEach((item) => {\r\n      const btn = item.querySelector('.umx-acc__btn');\r\n      const panel = item.querySelector('.umx-acc__panel');\r\n      if(!btn || !panel) return;\r\n\r\n      \/\/ safety: ensure hidden state\r\n      panel.hidden = true;\r\n      btn.setAttribute('aria-expanded', 'false');\r\n\r\n      btn.addEventListener('click', () => {\r\n        const isOpen = btn.getAttribute('aria-expanded') === 'true';\r\n\r\n        \/\/ close others (accordion behavior)\r\n        items.forEach((it) => {\r\n          const b = it.querySelector('.umx-acc__btn');\r\n          const p = it.querySelector('.umx-acc__panel');\r\n          if(!b || !p) return;\r\n          b.setAttribute('aria-expanded', 'false');\r\n          p.hidden = true;\r\n        });\r\n\r\n        \/\/ toggle current\r\n        btn.setAttribute('aria-expanded', String(!isOpen));\r\n        panel.hidden = isOpen;\r\n      });\r\n    });\r\n  })();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4d1b4b7 e-flex e-con-boxed e-con e-parent\" data-id=\"4d1b4b7\" data-element_type=\"container\" data-e-type=\"container\" data-no-translation=\"\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-70d2b45 elementor-widget elementor-widget-html\" data-id=\"70d2b45\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ========== USER MANUAL | TRANSPORTER DOCS (Elementor-ready) ========== -->\r\n<section class=\"umx-doc\" id=\"transporter-docs\">\r\n  <header class=\"umx-doc__head\">\r\n    <div>\r\n      <h2 class=\"umx-doc__title\">Transporter dashboard \u2013 documentation<\/h2>\r\n      <p class=\"umx-doc__subtitle\">\r\n        Routes, hubs, orders, couriers, vehicles, statistics and customer support on the transporter side of Ecolos+.\r\n      <\/p>\r\n    <\/div>\r\n    <span class=\"umx-badge\">Transporter<\/span>\r\n  <\/header>\r\n\r\n  <div class=\"umx-acc\" data-umx-acc>\r\n    <!-- ROUTES -->\r\n    <article class=\"umx-acc__item\" id=\"transporter-route-doc\" data-doc-card=\"true\">\r\n      <button class=\"umx-acc__btn\" type=\"button\" aria-expanded=\"false\" aria-controls=\"transporter-route-body\">\r\n        <div class=\"umx-acc__main\">\r\n          <h3 class=\"umx-acc__name\">Routes<\/h3>\r\n          <p class=\"umx-acc__desc\">Generate and manage delivery routes per hub and shift.<\/p>\r\n        <\/div>\r\n        <div class=\"umx-acc__right\">\r\n          <span class=\"umx-chip\">Generate \u00b7 Manage<\/span>\r\n          <span class=\"umx-caret\" aria-hidden=\"true\">\u25be<\/span>\r\n        <\/div>\r\n      <\/button>\r\n\r\n      <div class=\"umx-acc__panel\" id=\"transporter-route-body\" hidden>\r\n        <h4 class=\"umx-h4\">How to generate routes<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>In the transporter navigation, click <strong>Routes<\/strong>.<\/li>\r\n          <li>\r\n            In the routes table, find the row for the <strong>hub<\/strong> and <strong>shift<\/strong> you want to plan.\r\n            If needed, select the correct shift from the shift dropdown.\r\n          <\/li>\r\n          <li>Click <strong>Generate routes<\/strong> for that hub\/shift.<\/li>\r\n          <li>A dialog opens showing the available <strong>supplies<\/strong> (bikes, e-cars, vans, etc.). Verify the numbers.<\/li>\r\n          <li>Choose what to <strong>minimize<\/strong>: <strong>Cost<\/strong>, <strong>Distance<\/strong> or <strong>Duration<\/strong>.<\/li>\r\n          <li>Decide whether to <strong>use AI traffic prediction<\/strong> and toggle Enable\/Disable.<\/li>\r\n          <li>If needed, adjust supplies via <strong>Change supplies<\/strong>; otherwise click <strong>Confirm<\/strong>.<\/li>\r\n          <li>After optimization finishes, you\u2019ll get a confirmation that routes were generated for this hub and shift.<\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">How to manage routes for a hub and shift<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>Stay on the <strong>Routes<\/strong> page and find the same hub\/shift.<\/li>\r\n          <li>Click <strong>Manage routes<\/strong> for that row.<\/li>\r\n          <li>\r\n            In route management, you see a map with all generated routes. Use zoom\/controls to inspect shapes and stops.\r\n          <\/li>\r\n          <li>You can show\/hide <strong>unassigned orders<\/strong> on the map.<\/li>\r\n          <li>\r\n            Below the map, use the tabs:\r\n            <ul class=\"umx-ul\">\r\n              <li>\r\n                <strong>Generated route<\/strong> \u2013 route table (ID, vehicle, distance, duration, cost, courier, status) and actions.\r\n              <\/li>\r\n              <li>\r\n                <strong>Unassigned orders<\/strong> \u2013 orders not assigned to any route; move them or keep unassigned.\r\n              <\/li>\r\n              <li>\r\n                <strong>Courier assignment<\/strong> \u2013 assign a courier to each route via dropdown; then routes are ready for ops and courier apps.\r\n              <\/li>\r\n            <\/ul>\r\n          <\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">View routes list<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>In the transporter navigation, click <strong>Route<\/strong>.<\/li>\r\n          <li>Click <strong>View routes list<\/strong> at the top.<\/li>\r\n          <li>\r\n            Use <strong>Filter routes<\/strong>:\r\n            <ul class=\"umx-ul\">\r\n              <li><strong>Date<\/strong> \u2013 delivery date<\/li>\r\n              <li><strong>Distribution hub<\/strong> \u2013 hub<\/li>\r\n              <li><strong>Delivery shifts<\/strong> \u2013 (optional) one shift<\/li>\r\n              <li><strong>Courier<\/strong> \u2013 specific courier<\/li>\r\n              <li><strong>Route status<\/strong> \u2013 scheduled \/ in progress \/ completed<\/li>\r\n              <li><strong>Vehicle type<\/strong> \u2013 filter by vehicle<\/li>\r\n            <\/ul>\r\n          <\/li>\r\n          <li>The table updates to show only routes matching your filters.<\/li>\r\n        <\/ol>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- HUBS -->\r\n    <article class=\"umx-acc__item\" id=\"transporter-hub-doc\" data-doc-card=\"true\">\r\n      <button class=\"umx-acc__btn\" type=\"button\" aria-expanded=\"false\" aria-controls=\"transporter-hub-body\">\r\n        <div class=\"umx-acc__main\">\r\n          <h3 class=\"umx-acc__name\">Hubs<\/h3>\r\n          <p class=\"umx-acc__desc\">View hub shifts and operational settings.<\/p>\r\n        <\/div>\r\n        <div class=\"umx-acc__right\">\r\n          <span class=\"umx-chip\">Edit \u00b7 Supplies<\/span>\r\n          <span class=\"umx-caret\" aria-hidden=\"true\">\u25be<\/span>\r\n        <\/div>\r\n      <\/button>\r\n\r\n      <div class=\"umx-acc__panel\" id=\"transporter-hub-body\" hidden>\r\n        <h4 class=\"umx-h4\">Hubs overview<\/h4>\r\n        <p class=\"umx-p\">\r\n          The <strong>Hubs<\/strong> page shows a table with all hubs the transporter operates. For each hub you can choose a\r\n          <strong>shift<\/strong> and use actions like <strong>Edit hub params<\/strong> and <strong>Change supplies<\/strong>.\r\n        <\/p>\r\n\r\n        <h4 class=\"umx-h4\">How to edit hub parameters<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>On the <strong>Hubs<\/strong> page, find the hub you want to update.<\/li>\r\n          <li>Click <strong>Edit hub params<\/strong>.<\/li>\r\n          <li>\r\n            Adjust allowed operational parameters (e.g. default shifts or transporter-specific settings).\r\n            Some core fields may be read-only.\r\n          <\/li>\r\n          <li>Click <strong>Save<\/strong>.<\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">How to change supplies for a hub<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>On the <strong>Hubs<\/strong> page, find the hub where you want to adjust supplies.<\/li>\r\n          <li>Use the <strong>Shift<\/strong> dropdown to select the shift.<\/li>\r\n          <li>Click <strong>Change supplies<\/strong> for that hub and shift.<\/li>\r\n          <li>Update the number\/type of vehicles (bikes, e-cars, vans, etc.).<\/li>\r\n          <li>Confirm and save; updated supplies will be used during route generation.<\/li>\r\n        <\/ol>\r\n\r\n        <div class=\"umx-note\">\r\n          <strong>Tip:<\/strong> review orders and supplies per hub\/shift regularly to keep route generation aligned with real capacity.\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- ORDERS -->\r\n    <article class=\"umx-acc__item\" id=\"transporter-order-doc\" data-doc-card=\"true\">\r\n      <button class=\"umx-acc__btn\" type=\"button\" aria-expanded=\"false\" aria-controls=\"transporter-order-body\">\r\n        <div class=\"umx-acc__main\">\r\n          <h3 class=\"umx-acc__name\">Orders<\/h3>\r\n          <p class=\"umx-acc__desc\">View, filter and handle transporter orders.<\/p>\r\n        <\/div>\r\n        <div class=\"umx-acc__right\">\r\n          <span class=\"umx-chip\">View \u00b7 Handle pending<\/span>\r\n          <span class=\"umx-caret\" aria-hidden=\"true\">\u25be<\/span>\r\n        <\/div>\r\n      <\/button>\r\n\r\n      <div class=\"umx-acc__panel\" id=\"transporter-order-body\" hidden>\r\n        <h4 class=\"umx-h4\">Orders overview<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>In the transporter navigation, click <strong>Orders<\/strong>.<\/li>\r\n          <li>\r\n            Use the <strong>Filter orders<\/strong> panel:\r\n            <ul class=\"umx-ul\">\r\n              <li><strong>Delivery date<\/strong> \u2013 specific day<\/li>\r\n              <li><strong>Distribution hub<\/strong> \u2013 hub responsible<\/li>\r\n              <li><strong>Delivery shifts<\/strong> \u2013 one shift<\/li>\r\n              <li><strong>Order status<\/strong> \u2013 unassigned \/ scheduled \/ completed<\/li>\r\n              <li><strong>Parcel type<\/strong> \u2013 Regular \/ Eco \/ Large \/ Cold<\/li>\r\n            <\/ul>\r\n          <\/li>\r\n          <li>The table shows matching orders (ID, name, hub, parcel type, date, status, address, contact).<\/li>\r\n          <li>Use table tools (columns, filters, density, export) as needed.<\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">How to handle pending orders<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>On the <strong>Orders<\/strong> page, click <strong>Handle pending orders<\/strong>.<\/li>\r\n          <li>\r\n            In <strong>Assign selected order to<\/strong>, choose target:\r\n            <ul class=\"umx-ul\">\r\n              <li><strong>Date<\/strong><\/li>\r\n              <li><strong>Hub<\/strong><\/li>\r\n              <li><strong>Shift<\/strong><\/li>\r\n            <\/ul>\r\n            The <strong>Assign<\/strong> button becomes available once target is set and at least one order is selected.\r\n          <\/li>\r\n          <li>Use <strong>Filter orders<\/strong> to limit which pending orders you see.<\/li>\r\n          <li>Select orders using the checkboxes.<\/li>\r\n          <li>Click <strong>Assign<\/strong>.<\/li>\r\n          <li>Assigned orders will no longer appear as pending for other combinations.<\/li>\r\n        <\/ol>\r\n\r\n        <div class=\"umx-note\">\r\n          <strong>Tip:<\/strong> combine filters to assign orders in batches (e.g., same parcel type for one hub and date).\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- COURIERS -->\r\n    <article class=\"umx-acc__item\" id=\"transporter-courier-doc\" data-doc-card=\"true\">\r\n      <button class=\"umx-acc__btn\" type=\"button\" aria-expanded=\"false\" aria-controls=\"transporter-courier-body\">\r\n        <div class=\"umx-acc__main\">\r\n          <h3 class=\"umx-acc__name\">Couriers<\/h3>\r\n          <p class=\"umx-acc__desc\">Manage couriers, their hubs, shifts and access.<\/p>\r\n        <\/div>\r\n        <div class=\"umx-acc__right\">\r\n          <span class=\"umx-chip\">Add \u00b7 Edit \u00b7 Change password \u00b7 Delete<\/span>\r\n          <span class=\"umx-caret\" aria-hidden=\"true\">\u25be<\/span>\r\n        <\/div>\r\n      <\/button>\r\n\r\n      <div class=\"umx-acc__panel\" id=\"transporter-courier-body\" hidden>\r\n        <h4 class=\"umx-h4\">Couriers overview<\/h4>\r\n        <p class=\"umx-p\">\r\n          The <strong>Couriers<\/strong> page shows couriers grouped by hub. You can see name, username, shifts, phone,\r\n          main vehicle type, and actions to edit, change password or delete.\r\n        <\/p>\r\n\r\n        <h4 class=\"umx-h4\">How to add a courier<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>In the transporter navigation, click <strong>Couriers<\/strong>.<\/li>\r\n          <li>Click <strong>Add courier<\/strong> at the top.<\/li>\r\n          <li>\r\n            Fill courier details:\r\n            <ul class=\"umx-ul\">\r\n              <li><strong>Username*<\/strong> \u2013 login for courier app<\/li>\r\n              <li><strong>Password*<\/strong> \u2013 initial password<\/li>\r\n              <li><strong>First name*<\/strong>, <strong>Middle name<\/strong> (optional), <strong>Last name*<\/strong><\/li>\r\n              <li><strong>Phone*<\/strong>, <strong>Email*<\/strong><\/li>\r\n              <li><strong>Select a vehicle type*<\/strong> \u2013 bike \/ e-car \/ van \u2026<\/li>\r\n              <li><strong>Select a hub*<\/strong><\/li>\r\n              <li><strong>Cost per hour*<\/strong> \u2013 optional planning\/reporting cost<\/li>\r\n            <\/ul>\r\n          <\/li>\r\n          <li>Click <strong>Save<\/strong> to create the courier.<\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">How to edit a courier<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>On <strong>Couriers<\/strong>, find the courier under the correct hub.<\/li>\r\n          <li>Click <strong>Edit<\/strong>.<\/li>\r\n          <li>Update allowed fields (name, phone, vehicle type, hub, shifts).<\/li>\r\n          <li>Click <strong>Save<\/strong>.<\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">How to change a courier password<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>Find the courier on <strong>Couriers<\/strong>.<\/li>\r\n          <li>Click <strong>Change password<\/strong>.<\/li>\r\n          <li>Enter a new password and confirm if required.<\/li>\r\n          <li>Save; courier will use the new password in the app.<\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">How to delete a courier<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>Find the courier you want to remove.<\/li>\r\n          <li>Click <strong>Delete<\/strong>.<\/li>\r\n          <li>Confirm deletion; courier loses access.<\/li>\r\n        <\/ol>\r\n\r\n        <div class=\"umx-note\">\r\n          <strong>Tip:<\/strong> keep courier info and shifts up to date so assignments reflect real teams per hub.\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- VEHICLES -->\r\n    <article class=\"umx-acc__item\" id=\"transporter-vehicle-doc\" data-doc-card=\"true\">\r\n      <button class=\"umx-acc__btn\" type=\"button\" aria-expanded=\"false\" aria-controls=\"transporter-vehicle-body\">\r\n        <div class=\"umx-acc__main\">\r\n          <h3 class=\"umx-acc__name\">Vehicles<\/h3>\r\n          <p class=\"umx-acc__desc\">Configure vehicle types and their capacities and costs.<\/p>\r\n        <\/div>\r\n        <div class=\"umx-acc__right\">\r\n          <span class=\"umx-chip\">Edit vehicle parameters<\/span>\r\n          <span class=\"umx-caret\" aria-hidden=\"true\">\u25be<\/span>\r\n        <\/div>\r\n      <\/button>\r\n\r\n      <div class=\"umx-acc__panel\" id=\"transporter-vehicle-body\" hidden>\r\n        <h4 class=\"umx-h4\">Vehicles overview<\/h4>\r\n        <p class=\"umx-p\">\r\n          The <strong>Vehicles<\/strong> page shows one column per vehicle type in your operation (bike, truck, e-car, van,\r\n          cold-car, etc.). Each column contains configuration fields for planning and cost calculations.\r\n        <\/p>\r\n\r\n        <h4 class=\"umx-h4\">How to edit vehicle parameters<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>In the transporter navigation, click <strong>Vehicles<\/strong>.<\/li>\r\n          <li>Locate the vehicle type column you want to update (e.g. <em>Bike<\/em>, <em>Van<\/em>, <em>Cold-car<\/em>).<\/li>\r\n          <li>\r\n            Update fields as needed:\r\n            <ul class=\"umx-ul\">\r\n              <li><strong>Max speed<\/strong><\/li>\r\n              <li><strong>Max task<\/strong><\/li>\r\n              <li><strong>Weight capacity<\/strong><\/li>\r\n              <li><strong>Volume capacity<\/strong><\/li>\r\n              <li><strong>Fuel type<\/strong><\/li>\r\n              <li><strong>Fuel consumption<\/strong><\/li>\r\n              <li><strong>Loading cost<\/strong><\/li>\r\n              <li><strong>Travel cost per km<\/strong><\/li>\r\n              <li><strong>Min allowed cost<\/strong><\/li>\r\n            <\/ul>\r\n          <\/li>\r\n          <li>Repeat for other vehicle types if needed.<\/li>\r\n          <li>Save (if required). New values are used for the next route generation and cost calculation.<\/li>\r\n        <\/ol>\r\n\r\n        <div class=\"umx-note\">\r\n          <strong>Tip:<\/strong> align capacities and costs with your real fleet\/contracts for realistic plans and accurate estimates.\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- STATISTICS & CUSTOMER SUPPORT -->\r\n    <article class=\"umx-acc__item\" id=\"transporter-statistics-support-doc\" data-doc-card=\"true\">\r\n      <button class=\"umx-acc__btn\" type=\"button\" aria-expanded=\"false\" aria-controls=\"transporter-stats-body\">\r\n        <div class=\"umx-acc__main\">\r\n          <h3 class=\"umx-acc__name\">Statistics &amp; customer support<\/h3>\r\n          <p class=\"umx-acc__desc\">Analyse performance and check delivery logs for support.<\/p>\r\n        <\/div>\r\n        <div class=\"umx-acc__right\">\r\n          <span class=\"umx-chip\">Dashboards \u00b7 Logs<\/span>\r\n          <span class=\"umx-caret\" aria-hidden=\"true\">\u25be<\/span>\r\n        <\/div>\r\n      <\/button>\r\n\r\n      <div class=\"umx-acc__panel\" id=\"transporter-stats-body\" hidden>\r\n        <h4 class=\"umx-h4\">Daily statistics (transporter)<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>In transporter navigation, open <strong>Statistics<\/strong>.<\/li>\r\n          <li>Select <strong>Daily statistics<\/strong>.<\/li>\r\n          <li>\r\n            Set filters:\r\n            <ul class=\"umx-ul\">\r\n              <li><strong>Choose a hub<\/strong><\/li>\r\n              <li><strong>Date<\/strong><\/li>\r\n              <li><strong>Choose shifts<\/strong> (optional)<\/li>\r\n            <\/ul>\r\n          <\/li>\r\n          <li>Click <strong>View stats<\/strong> to see daily KPIs.<\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">Overall statistics (date range)<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>Switch to <strong>Overall statistics<\/strong>.<\/li>\r\n          <li>Choose the hub to analyse.<\/li>\r\n          <li>\r\n            Set date range:\r\n            <ul class=\"umx-ul\">\r\n              <li><strong>Start date<\/strong><\/li>\r\n              <li><strong>End date<\/strong> \u2013 must be earlier than today (up to yesterday).<\/li>\r\n            <\/ul>\r\n          <\/li>\r\n          <li>(Optional) select shifts.<\/li>\r\n          <li>Click <strong>View stats<\/strong> for aggregated KPIs.<\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">Customer support \u2013 logs by date range<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>Open <strong>Customer support<\/strong>.<\/li>\r\n          <li>\r\n            On <strong>All<\/strong> tab, set:\r\n            <ul class=\"umx-ul\">\r\n              <li><strong>Start date<\/strong> and <strong>End date<\/strong><\/li>\r\n              <li><strong>Choose a hub<\/strong><\/li>\r\n              <li><strong>Choose a shift<\/strong> (optional)<\/li>\r\n            <\/ul>\r\n          <\/li>\r\n          <li>Click <strong>View logs<\/strong> to list matching entries.<\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">Customer support \u2013 logs by order ID<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>Switch to <strong>By order ID<\/strong>.<\/li>\r\n          <li>Enter the order ID and apply filters if needed.<\/li>\r\n          <li>Review log entries for that order to investigate issues.<\/li>\r\n        <\/ol>\r\n\r\n        <div class=\"umx-note\">\r\n          <strong>Tip:<\/strong> use statistics for long-term monitoring, and support logs for deep investigation of single deliveries.\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  \/* ===== Scoped tokens (same family as previous sections) ===== *\/\r\n  .umx-doc{\r\n    --deep:#0F2C3E;\r\n    --mint:#00D09C;\r\n    --bondi:#0396a6;\r\n    --white:#FFFFFF;\r\n    --platinum:#F4F6F8;\r\n\r\n    --border: rgba(244,246,248,.18);\r\n    --soft: rgba(255,255,255,.06);\r\n    --soft2: rgba(6,37,52,.42);\r\n    --text: rgba(255,255,255,.92);\r\n    --muted: rgba(255,255,255,.72);\r\n\r\n    padding: 18px;\r\n    border-radius: 28px;\r\n    border: 1px dashed rgba(244,246,248,.45);\r\n    background: var(--soft);\r\n    box-shadow: 0 14px 34px rgba(0,0,0,.18);\r\n    color: var(--text);\r\n  }\r\n  .umx-doc *{ box-sizing:border-box; }\r\n\r\n  .umx-doc__head{\r\n    display:flex;\r\n    align-items:flex-start;\r\n    justify-content:space-between;\r\n    gap:12px;\r\n    flex-wrap:wrap;\r\n    margin-bottom: 14px;\r\n  }\r\n  .umx-doc__title{\r\n    margin:0;\r\n    font-size: 18px;\r\n    letter-spacing:.04em;\r\n    text-transform: uppercase;\r\n    color: var(--text);\r\n  }\r\n  .umx-doc__subtitle{\r\n    margin: 6px 0 0;\r\n    font-size: 13px;\r\n    color: var(--muted);\r\n    max-width: 820px;\r\n  }\r\n  .umx-badge{\r\n    font-size: 11px;\r\n    padding: 6px 10px;\r\n    border-radius: 999px;\r\n    border: 1px solid rgba(244,246,248,.18);\r\n    background: rgba(255,255,255,.06);\r\n    color: rgba(255,255,255,.86);\r\n    white-space:nowrap;\r\n  }\r\n\r\n  .umx-acc{\r\n    display:flex;\r\n    flex-direction:column;\r\n    gap: 12px;\r\n    margin-top: 12px;\r\n  }\r\n\r\n  .umx-acc__item{\r\n    border-radius: 22px;\r\n    border: 1px solid var(--border);\r\n    background: var(--soft2);\r\n    box-shadow: 0 16px 40px rgba(0,0,0,.18);\r\n    overflow:hidden;\r\n  }\r\n\r\n  .umx-acc__btn{\r\n    width:100%;\r\n    text-align:left;\r\n    border:0;\r\n    background:transparent;\r\n    color:inherit;\r\n    cursor:pointer;\r\n    padding: 14px 14px;\r\n    display:flex;\r\n    align-items:flex-start;\r\n    justify-content:space-between;\r\n    gap: 12px;\r\n  }\r\n  .umx-acc__btn:focus-visible{\r\n    outline:none;\r\n    box-shadow: 0 0 0 4px rgba(0,208,156,.22) inset;\r\n  }\r\n\r\n  .umx-acc__main{ min-width:0; }\r\n  .umx-acc__name{ margin:0; font-size: 15px; color: rgba(255,255,255,.95); }\r\n  .umx-acc__desc{ margin: 4px 0 0; font-size: 12.5px; color: rgba(255,255,255,.70); }\r\n\r\n  .umx-acc__right{\r\n    display:flex;\r\n    align-items:center;\r\n    gap:10px;\r\n    flex:0 0 auto;\r\n  }\r\n\r\n  .umx-chip{\r\n    font-size: 11px;\r\n    padding: 6px 10px;\r\n    border-radius: 999px;\r\n    border: 1px solid rgba(244,246,248,.16);\r\n    background: rgba(255,255,255,.06);\r\n    color: rgba(255,255,255,.86);\r\n    white-space:nowrap;\r\n  }\r\n\r\n  .umx-caret{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    width: 32px;\r\n    height: 32px;\r\n    border-radius: 999px;\r\n    border: 1px solid rgba(244,246,248,.14);\r\n    background: rgba(255,255,255,.06);\r\n    color: rgba(255,255,255,.9);\r\n    transition: transform .18s ease;\r\n    user-select:none;\r\n  }\r\n  .umx-acc__btn[aria-expanded=\"true\"] .umx-caret{ transform: rotate(180deg); }\r\n\r\n  .umx-acc__panel{\r\n    padding: 0 14px 14px;\r\n    border-top: 1px dashed rgba(244,246,248,.16);\r\n  }\r\n\r\n  .umx-p{ margin: 12px 0 10px; font-size: 12.8px; color: rgba(255,255,255,.78); }\r\n  .umx-h4{ margin: 10px 0 6px; font-size: 13px; color: rgba(255,255,255,.92); letter-spacing:.02em; }\r\n\r\n  .umx-ol{\r\n    margin: 0 0 10px 18px;\r\n    padding: 0;\r\n    font-size: 12.5px;\r\n    color: rgba(255,255,255,.78);\r\n  }\r\n  .umx-ol li{ margin: 6px 0; }\r\n\r\n  .umx-ul{\r\n    margin: 6px 0 0 16px;\r\n    padding: 0;\r\n    font-size: 12.5px;\r\n    color: rgba(255,255,255,.78);\r\n  }\r\n  .umx-ul li{ margin: 4px 0; }\r\n\r\n  .umx-note{\r\n    margin-top: 10px;\r\n    padding: 10px 12px;\r\n    border-radius: 16px;\r\n    border: 1px solid rgba(0,208,156,.22);\r\n    background: rgba(0,208,156,.10);\r\n    color: rgba(255,255,255,.88);\r\n    font-size: 12.5px;\r\n  }\r\n\r\n  .umx-doc code{\r\n    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\r\n    font-size: 0.95em;\r\n    padding: 2px 6px;\r\n    border-radius: 999px;\r\n    border: 1px solid rgba(244,246,248,.14);\r\n    background: rgba(255,255,255,.08);\r\n    color: rgba(255,255,255,.92);\r\n    white-space: nowrap;\r\n  }\r\n\r\n  @media (max-width: 900px){\r\n    .umx-acc__btn{ padding: 12px; }\r\n    .umx-acc__panel{ padding: 0 12px 12px; }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  (function(){\r\n    const root = document.querySelector('#transporter-docs');\r\n    if(!root) return;\r\n\r\n    const items = root.querySelectorAll('.umx-acc__item');\r\n    items.forEach((item) => {\r\n      const btn = item.querySelector('.umx-acc__btn');\r\n      const panel = item.querySelector('.umx-acc__panel');\r\n      if(!btn || !panel) return;\r\n\r\n      panel.hidden = true;\r\n      btn.setAttribute('aria-expanded', 'false');\r\n\r\n      btn.addEventListener('click', () => {\r\n        const isOpen = btn.getAttribute('aria-expanded') === 'true';\r\n\r\n        \/\/ close others\r\n        items.forEach((it) => {\r\n          const b = it.querySelector('.umx-acc__btn');\r\n          const p = it.querySelector('.umx-acc__panel');\r\n          if(!b || !p) return;\r\n          b.setAttribute('aria-expanded', 'false');\r\n          p.hidden = true;\r\n        });\r\n\r\n        \/\/ toggle current\r\n        btn.setAttribute('aria-expanded', String(!isOpen));\r\n        panel.hidden = isOpen;\r\n      });\r\n    });\r\n  })();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-44056d3 e-flex e-con-boxed e-con e-parent\" data-id=\"44056d3\" data-element_type=\"container\" data-e-type=\"container\" data-no-translation=\"\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-459ce83 elementor-widget elementor-widget-html\" data-id=\"459ce83\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ========== USER MANUAL | CUSTOMER APP DOCS (Elementor-ready) ========== -->\r\n<section class=\"umx-doc\" id=\"customer-app-docs\">\r\n  <header class=\"umx-doc__head\">\r\n    <div>\r\n      <h2 class=\"umx-doc__title\">Customer app \u2013 documentation<\/h2>\r\n      <p class=\"umx-doc__subtitle\">\r\n        Track deliveries, see order details, postpone or cancel orders and manage your profile in the Ecolos+ customer app.\r\n      <\/p>\r\n    <\/div>\r\n    <span class=\"umx-badge\">Recipient app<\/span>\r\n  <\/header>\r\n\r\n  <div class=\"umx-acc\" data-umx-acc>\r\n    <!-- MY DELIVERIES -->\r\n    <article class=\"umx-acc__item\" id=\"customer-my-deliveries-doc\" data-doc-card=\"true\">\r\n      <button class=\"umx-acc__btn\" type=\"button\" aria-expanded=\"false\" aria-controls=\"customer-deliveries-body\">\r\n        <div class=\"umx-acc__main\">\r\n          <h3 class=\"umx-acc__name\">My Deliveries<\/h3>\r\n          <p class=\"umx-acc__desc\">See all your active deliveries in one place.<\/p>\r\n        <\/div>\r\n        <div class=\"umx-acc__right\">\r\n          <span class=\"umx-chip\">View \u00b7 Browse<\/span>\r\n          <span class=\"umx-caret\" aria-hidden=\"true\">\u25be<\/span>\r\n        <\/div>\r\n      <\/button>\r\n\r\n      <div class=\"umx-acc__panel\" id=\"customer-deliveries-body\" hidden>\r\n        <p class=\"umx-p\">\r\n          The <strong>My Deliveries<\/strong> screen is the home view of the customer app. It shows how many\r\n          <strong>active deliveries<\/strong> you have and lists each order in a separate card with its status,\r\n          delivery date and actions.\r\n        <\/p>\r\n\r\n        <h4 class=\"umx-h4\">What you see on My Deliveries<\/h4>\r\n        <ul class=\"umx-ul\">\r\n          <li>\r\n            At the top: <strong>My Deliveries<\/strong> and a line like <em>\u201c5 active deliveries\u201d<\/em>.\r\n          <\/li>\r\n          <li>\r\n            Two summary boxes: <strong>Active<\/strong> and <strong>Delivered<\/strong>.\r\n          <\/li>\r\n          <li>\r\n            A list of <strong>delivery cards<\/strong>. Each card normally includes:\r\n            <ul class=\"umx-ul\">\r\n              <li><strong>Order code<\/strong> (e.g. <em>BC1000<\/em>).<\/li>\r\n              <li><strong>Order title<\/strong> (e.g. <em>Order 1<\/em>).<\/li>\r\n              <li><strong>Price<\/strong> (e.g. <em>$20.00<\/em>).<\/li>\r\n              <li><strong>Delivery date and time<\/strong> (e.g. <em>Wed Dec 03 2025<\/em>).<\/li>\r\n              <li>\r\n                A <strong>status badge<\/strong> like <em>Registered<\/em>, <em>Scheduled<\/em>, <em>Delivered<\/em> or <em>Unassigned<\/em>.\r\n              <\/li>\r\n              <li>\r\n                For active deliveries: <strong>Postpone<\/strong> (blue) and <strong>Cancel<\/strong> (red).\r\n              <\/li>\r\n            <\/ul>\r\n          <\/li>\r\n        <\/ul>\r\n\r\n        <h4 class=\"umx-h4\">How to open and use My Deliveries<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>After login, you usually land on <strong>My Deliveries<\/strong>. If not, tap <strong>Orders<\/strong> in bottom navigation.<\/li>\r\n          <li>Check <strong>Active<\/strong> and <strong>Delivered<\/strong> counts for a quick overview.<\/li>\r\n          <li>Scroll to browse your delivery cards.<\/li>\r\n          <li>Tap anywhere on a card to open <strong>Order Detail<\/strong> (not only the buttons).<\/li>\r\n        <\/ol>\r\n\r\n        <div class=\"umx-note\">\r\n          <strong>Tip:<\/strong> focus on <strong>Registered<\/strong> and <strong>Scheduled<\/strong> deliveries\u2014these can usually still be postponed or cancelled.\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- ORDER DETAIL & TRACKING -->\r\n    <article class=\"umx-acc__item\" id=\"customer-order-detail-doc\" data-doc-card=\"true\">\r\n      <button class=\"umx-acc__btn\" type=\"button\" aria-expanded=\"false\" aria-controls=\"customer-order-detail-body\">\r\n        <div class=\"umx-acc__main\">\r\n          <h3 class=\"umx-acc__name\">Order detail &amp; tracking<\/h3>\r\n          <p class=\"umx-acc__desc\">See full information and live status for one order.<\/p>\r\n        <\/div>\r\n        <div class=\"umx-acc__right\">\r\n          <span class=\"umx-chip\">View details \u00b7 Track<\/span>\r\n          <span class=\"umx-caret\" aria-hidden=\"true\">\u25be<\/span>\r\n        <\/div>\r\n      <\/button>\r\n\r\n      <div class=\"umx-acc__panel\" id=\"customer-order-detail-body\" hidden>\r\n        <h4 class=\"umx-h4\">How to open order details<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>Go to <strong>My Deliveries<\/strong> (bottom navigation \u2192 <strong>Orders<\/strong>).<\/li>\r\n          <li>Find the order and tap anywhere on its card.<\/li>\r\n          <li>The <strong>Order Detail<\/strong> screen opens with sections for this delivery.<\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">What you see in the Order Detail view<\/h4>\r\n        <ul class=\"umx-ul\">\r\n          <li>\r\n            Top area: <strong>status badge<\/strong> (e.g. <em>Scheduled<\/em>), order icon, then <strong>Order name<\/strong> and <strong>Order code<\/strong>.\r\n          <\/li>\r\n          <li>A colored banner with <strong>ETA<\/strong> (Estimated Time of Arrival).<\/li>\r\n          <li>\r\n            <strong>Delivery Information<\/strong>:\r\n            <ul class=\"umx-ul\">\r\n              <li>Delivery address and extra notes (e.g. floor).<\/li>\r\n              <li>Planned delivery date\/time.<\/li>\r\n              <li>Shipping fee.<\/li>\r\n              <li>Sometimes weight and volume.<\/li>\r\n            <\/ul>\r\n          <\/li>\r\n          <li>\r\n            <strong>Courier Information<\/strong>:\r\n            <ul class=\"umx-ul\">\r\n              <li>Courier name<\/li>\r\n              <li>Phone number<\/li>\r\n              <li>Email<\/li>\r\n            <\/ul>\r\n          <\/li>\r\n          <li><strong>Tracking Timeline<\/strong> with main steps.<\/li>\r\n          <li>Bottom actions: <strong>Cancel Order<\/strong> (red) and <strong>Postpone Order<\/strong> (blue).<\/li>\r\n        <\/ul>\r\n\r\n        <h4 class=\"umx-h4\">How to read the tracking timeline<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>Each row is one step (e.g. <em>Registered<\/em>, <em>Scheduled<\/em>, <em>Delivered<\/em>).<\/li>\r\n          <li>The step with the colored dot is the <strong>current status<\/strong>.<\/li>\r\n          <li>Steps above are completed; steps below are upcoming.<\/li>\r\n        <\/ol>\r\n\r\n        <div class=\"umx-note\">\r\n          <strong>Tip:<\/strong> when contacting support, mention both the <strong>order code<\/strong> and the <strong>current timeline step<\/strong>.\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- POSTPONE OR CANCEL -->\r\n    <article class=\"umx-acc__item\" id=\"customer-postpone-cancel-doc\" data-doc-card=\"true\">\r\n      <button class=\"umx-acc__btn\" type=\"button\" aria-expanded=\"false\" aria-controls=\"customer-postpone-cancel-body\">\r\n        <div class=\"umx-acc__main\">\r\n          <h3 class=\"umx-acc__name\">Postpone or cancel an order<\/h3>\r\n          <p class=\"umx-acc__desc\">Change the delivery date or cancel before it is delivered.<\/p>\r\n        <\/div>\r\n        <div class=\"umx-acc__right\">\r\n          <span class=\"umx-chip\">Postpone \u00b7 Cancel<\/span>\r\n          <span class=\"umx-caret\" aria-hidden=\"true\">\u25be<\/span>\r\n        <\/div>\r\n      <\/button>\r\n\r\n      <div class=\"umx-acc__panel\" id=\"customer-postpone-cancel-body\" hidden>\r\n        <h4 class=\"umx-h4\">How to postpone a delivery<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>Open <strong>My Deliveries<\/strong> and find the order, or open <strong>Order Detail<\/strong>.<\/li>\r\n          <li>Tap <strong>Postpone<\/strong> \/ <strong>Postpone Order<\/strong>.<\/li>\r\n          <li>A pop-up appears titled <strong>Postpone Order<\/strong>.<\/li>\r\n          <li>Tap <strong>Select target date<\/strong> and choose a new date.<\/li>\r\n          <li>Tap <strong>Confirm<\/strong> to apply; the pop-up closes.<\/li>\r\n          <li>The new delivery date\/status updates on the card and in <strong>Order Detail<\/strong>.<\/li>\r\n        <\/ol>\r\n\r\n        <div class=\"umx-callout\">\r\n          If the date is not allowed (too early\/too far), the app shows an error and you need to choose another date.\r\n        <\/div>\r\n\r\n        <h4 class=\"umx-h4\">How to cancel a delivery<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>Open <strong>My Deliveries<\/strong> or <strong>Order Detail<\/strong> for the order.<\/li>\r\n          <li>Tap <strong>Cancel<\/strong> \/ <strong>Cancel Order<\/strong>.<\/li>\r\n          <li>Confirm cancellation if prompted.<\/li>\r\n          <li>After success, the order disappears from <strong>active deliveries<\/strong> (history may vary by configuration).<\/li>\r\n        <\/ol>\r\n\r\n        <div class=\"umx-note\">\r\n          <strong>Note:<\/strong> after an order is <strong>delivered<\/strong>, it can\u2019t be postponed or cancelled.\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- DELIVERY STATUSES -->\r\n    <article class=\"umx-acc__item\" id=\"customer-statuses-doc\" data-doc-card=\"true\">\r\n      <button class=\"umx-acc__btn\" type=\"button\" aria-expanded=\"false\" aria-controls=\"customer-statuses-body\">\r\n        <div class=\"umx-acc__main\">\r\n          <h3 class=\"umx-acc__name\">Delivery statuses<\/h3>\r\n          <p class=\"umx-acc__desc\">Understand what each status badge means.<\/p>\r\n        <\/div>\r\n        <div class=\"umx-acc__right\">\r\n          <span class=\"umx-chip\">Registered \u00b7 Scheduled \u00b7 Delivered<\/span>\r\n          <span class=\"umx-caret\" aria-hidden=\"true\">\u25be<\/span>\r\n        <\/div>\r\n      <\/button>\r\n\r\n      <div class=\"umx-acc__panel\" id=\"customer-statuses-body\" hidden>\r\n        <p class=\"umx-p\">\r\n          Each delivery card and the <strong>Order Detail<\/strong> view show a colored <strong>status badge<\/strong>.\r\n          The badge matches the tracking timeline to help you quickly understand where your parcel is.\r\n        <\/p>\r\n\r\n        <h4 class=\"umx-h4\">Main statuses in the customer app<\/h4>\r\n        <ul class=\"umx-ul\">\r\n          <li>\r\n            <strong>Registered<\/strong> (blue) \u2013 order created and registered. Usually you can still <strong>postpone<\/strong> or <strong>cancel<\/strong>.\r\n          <\/li>\r\n          <li>\r\n            <strong>Scheduled<\/strong> (orange\/gold) \u2013 planned for a specific window and assigned to a courier\/route. You\u2019ll see an <strong>ETA<\/strong>.\r\n          <\/li>\r\n          <li>\r\n            <strong>Delivered<\/strong> (green) \u2013 completed; actions are not available.\r\n          <\/li>\r\n          <li>\r\n            <strong>Unassigned<\/strong> (dark) \u2013 registered but not connected to a courier\/route yet (typically temporary).\r\n          <\/li>\r\n        <\/ul>\r\n\r\n        <div class=\"umx-note\">\r\n          <strong>Tip:<\/strong> when you have many deliveries, prioritize <strong>Scheduled<\/strong>, then review <strong>Registered<\/strong>\/<strong>Unassigned<\/strong>.\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- PROFILE & SUPPORT -->\r\n    <article class=\"umx-acc__item\" id=\"customer-profile-doc\" data-doc-card=\"true\">\r\n      <button class=\"umx-acc__btn\" type=\"button\" aria-expanded=\"false\" aria-controls=\"customer-profile-body\">\r\n        <div class=\"umx-acc__main\">\r\n          <h3 class=\"umx-acc__name\">Profile &amp; support<\/h3>\r\n          <p class=\"umx-acc__desc\">Manage your contact details and reach support.<\/p>\r\n        <\/div>\r\n        <div class=\"umx-acc__right\">\r\n          <span class=\"umx-chip\">Profile \u00b7 Help \u00b7 Sign out<\/span>\r\n          <span class=\"umx-caret\" aria-hidden=\"true\">\u25be<\/span>\r\n        <\/div>\r\n      <\/button>\r\n\r\n      <div class=\"umx-acc__panel\" id=\"customer-profile-body\" hidden>\r\n        <h4 class=\"umx-h4\">How to open your profile<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>In bottom navigation, tap <strong>Profile<\/strong>.<\/li>\r\n          <li>The profile screen opens with your info and support options.<\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">What you see in the Profile screen<\/h4>\r\n        <ul class=\"umx-ul\">\r\n          <li>Top card with your <strong>name<\/strong> and <strong>email<\/strong>.<\/li>\r\n          <li>\r\n            <strong>Contact<\/strong> section:\r\n            <ul class=\"umx-ul\">\r\n              <li>Phone number<\/li>\r\n              <li>Email address<\/li>\r\n              <li>City\/country (or similar location info)<\/li>\r\n            <\/ul>\r\n          <\/li>\r\n          <li>\r\n            <strong>Support<\/strong> section:\r\n            <ul class=\"umx-ul\">\r\n              <li><strong>Help Center<\/strong> \u2013 general help and FAQs<\/li>\r\n              <li><strong>Contact Support<\/strong> \u2013 reach support (email\/form depending on setup)<\/li>\r\n            <\/ul>\r\n          <\/li>\r\n          <li><strong>Sign Out<\/strong> row at the bottom.<\/li>\r\n        <\/ul>\r\n\r\n        <h4 class=\"umx-h4\">How to sign out<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>Open <strong>Profile<\/strong>.<\/li>\r\n          <li>Tap <strong>Sign Out<\/strong>.<\/li>\r\n          <li>Confirm if asked; you return to login and the session is closed on this device.<\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">How to get help<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>Go to <strong>Profile<\/strong> \u2192 <strong>Support<\/strong>.<\/li>\r\n          <li>Tap <strong>Help Center<\/strong> for general info.<\/li>\r\n          <li>\r\n            Tap <strong>Contact Support<\/strong> for a specific issue. Include the <strong>order code<\/strong> from\r\n            <em>Order Detail<\/em> to speed up troubleshooting.\r\n          <\/li>\r\n        <\/ol>\r\n\r\n        <div class=\"umx-note\">\r\n          <strong>Tip:<\/strong> keep contact details updated so couriers and support can reach you quickly.\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  \/* ===== Scoped tokens (same system) ===== *\/\r\n  #customer-app-docs.umx-doc{\r\n    --deep:#0F2C3E;\r\n    --mint:#00D09C;\r\n    --bondi:#0396a6;\r\n    --white:#FFFFFF;\r\n    --platinum:#F4F6F8;\r\n\r\n    --border: rgba(244,246,248,.18);\r\n    --soft: rgba(255,255,255,.06);\r\n    --soft2: rgba(6,37,52,.42);\r\n    --text: rgba(255,255,255,.92);\r\n    --muted: rgba(255,255,255,.72);\r\n\r\n    padding: 18px;\r\n    border-radius: 28px;\r\n    border: 1px dashed rgba(244,246,248,.45);\r\n    background: var(--soft);\r\n    box-shadow: 0 14px 34px rgba(0,0,0,.18);\r\n    color: var(--text);\r\n  }\r\n  #customer-app-docs.umx-doc *{ box-sizing:border-box; }\r\n\r\n  #customer-app-docs .umx-doc__head{\r\n    display:flex;\r\n    align-items:flex-start;\r\n    justify-content:space-between;\r\n    gap:12px;\r\n    flex-wrap:wrap;\r\n    margin-bottom: 14px;\r\n  }\r\n  #customer-app-docs .umx-doc__title{\r\n    margin:0;\r\n    font-size: 18px;\r\n    letter-spacing:.04em;\r\n    text-transform: uppercase;\r\n    color: var(--text);\r\n  }\r\n  #customer-app-docs .umx-doc__subtitle{\r\n    margin: 6px 0 0;\r\n    font-size: 13px;\r\n    color: var(--muted);\r\n    max-width: 820px;\r\n  }\r\n  #customer-app-docs .umx-badge{\r\n    font-size: 11px;\r\n    padding: 6px 10px;\r\n    border-radius: 999px;\r\n    border: 1px solid rgba(244,246,248,.18);\r\n    background: rgba(255,255,255,.06);\r\n    color: rgba(255,255,255,.86);\r\n    white-space:nowrap;\r\n  }\r\n\r\n  #customer-app-docs .umx-acc{ display:flex; flex-direction:column; gap: 12px; margin-top: 12px; }\r\n\r\n  #customer-app-docs .umx-acc__item{\r\n    border-radius: 22px;\r\n    border: 1px solid var(--border);\r\n    background: var(--soft2);\r\n    box-shadow: 0 16px 40px rgba(0,0,0,.18);\r\n    overflow:hidden;\r\n  }\r\n\r\n  #customer-app-docs .umx-acc__btn{\r\n    width:100%;\r\n    text-align:left;\r\n    border:0;\r\n    background:transparent;\r\n    color:inherit;\r\n    cursor:pointer;\r\n    padding: 14px 14px;\r\n    display:flex;\r\n    align-items:flex-start;\r\n    justify-content:space-between;\r\n    gap: 12px;\r\n  }\r\n  #customer-app-docs .umx-acc__btn:focus-visible{\r\n    outline:none;\r\n    box-shadow: 0 0 0 4px rgba(0,208,156,.22) inset;\r\n  }\r\n\r\n  #customer-app-docs .umx-acc__main{ min-width:0; }\r\n  #customer-app-docs .umx-acc__name{ margin:0; font-size: 15px; color: rgba(255,255,255,.95); }\r\n  #customer-app-docs .umx-acc__desc{ margin: 4px 0 0; font-size: 12.5px; color: rgba(255,255,255,.70); }\r\n\r\n  #customer-app-docs .umx-acc__right{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }\r\n\r\n  #customer-app-docs .umx-chip{\r\n    font-size: 11px;\r\n    padding: 6px 10px;\r\n    border-radius: 999px;\r\n    border: 1px solid rgba(244,246,248,.16);\r\n    background: rgba(255,255,255,.06);\r\n    color: rgba(255,255,255,.86);\r\n    white-space:nowrap;\r\n  }\r\n\r\n  #customer-app-docs .umx-caret{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    width: 32px;\r\n    height: 32px;\r\n    border-radius: 999px;\r\n    border: 1px solid rgba(244,246,248,.14);\r\n    background: rgba(255,255,255,.06);\r\n    color: rgba(255,255,255,.9);\r\n    transition: transform .18s ease;\r\n    user-select:none;\r\n  }\r\n  #customer-app-docs .umx-acc__btn[aria-expanded=\"true\"] .umx-caret{ transform: rotate(180deg); }\r\n\r\n  #customer-app-docs .umx-acc__panel{\r\n    padding: 0 14px 14px;\r\n    border-top: 1px dashed rgba(244,246,248,.16);\r\n  }\r\n\r\n  #customer-app-docs .umx-p{ margin: 12px 0 10px; font-size: 12.8px; color: rgba(255,255,255,.78); }\r\n  #customer-app-docs .umx-h4{ margin: 10px 0 6px; font-size: 13px; color: rgba(255,255,255,.92); letter-spacing:.02em; }\r\n\r\n  #customer-app-docs .umx-ol{\r\n    margin: 0 0 10px 18px;\r\n    padding: 0;\r\n    font-size: 12.5px;\r\n    color: rgba(255,255,255,.78);\r\n  }\r\n  #customer-app-docs .umx-ol li{ margin: 6px 0; }\r\n\r\n  #customer-app-docs .umx-ul{\r\n    margin: 6px 0 10px 18px;\r\n    padding: 0;\r\n    font-size: 12.5px;\r\n    color: rgba(255,255,255,.78);\r\n  }\r\n  #customer-app-docs .umx-ul li{ margin: 4px 0; }\r\n\r\n  #customer-app-docs .umx-note{\r\n    margin-top: 10px;\r\n    padding: 10px 12px;\r\n    border-radius: 16px;\r\n    border: 1px solid rgba(0,208,156,.22);\r\n    background: rgba(0,208,156,.10);\r\n    color: rgba(255,255,255,.88);\r\n    font-size: 12.5px;\r\n  }\r\n\r\n  #customer-app-docs .umx-callout{\r\n    margin-top: 10px;\r\n    padding: 10px 12px;\r\n    border-radius: 16px;\r\n    border: 1px solid rgba(3,150,166,.22);\r\n    background: rgba(3,150,166,.10);\r\n    color: rgba(255,255,255,.90);\r\n    font-size: 12.5px;\r\n  }\r\n\r\n  @media (max-width: 900px){\r\n    #customer-app-docs .umx-acc__btn{ padding: 12px; }\r\n    #customer-app-docs .umx-acc__panel{ padding: 0 12px 12px; }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  (function(){\r\n    const root = document.querySelector('#customer-app-docs');\r\n    if(!root) return;\r\n\r\n    const items = root.querySelectorAll('.umx-acc__item');\r\n    items.forEach((item) => {\r\n      const btn = item.querySelector('.umx-acc__btn');\r\n      const panel = item.querySelector('.umx-acc__panel');\r\n      if(!btn || !panel) return;\r\n\r\n      panel.hidden = true;\r\n      btn.setAttribute('aria-expanded', 'false');\r\n\r\n      btn.addEventListener('click', () => {\r\n        const isOpen = btn.getAttribute('aria-expanded') === 'true';\r\n\r\n        items.forEach((it) => {\r\n          const b = it.querySelector('.umx-acc__btn');\r\n          const p = it.querySelector('.umx-acc__panel');\r\n          if(!b || !p) return;\r\n          b.setAttribute('aria-expanded', 'false');\r\n          p.hidden = true;\r\n        });\r\n\r\n        btn.setAttribute('aria-expanded', String(!isOpen));\r\n        panel.hidden = isOpen;\r\n      });\r\n    });\r\n  })();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-525eb7a e-flex e-con-boxed e-con e-parent\" data-id=\"525eb7a\" data-element_type=\"container\" data-e-type=\"container\" data-no-translation=\"\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aa0ad82 elementor-widget elementor-widget-html\" data-id=\"aa0ad82\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ========== USER MANUAL | COURIER APP DOCS (Elementor-ready) ========== -->\r\n<section class=\"umx-doc\" id=\"courier-app-docs\">\r\n  <header class=\"umx-doc__head\">\r\n    <div>\r\n      <h2 class=\"umx-doc__title\">Courier app \u2013 documentation<\/h2>\r\n      <p class=\"umx-doc__subtitle\">\r\n        Use the Ecolos+ courier app to receive routes, load parcels, follow navigation and report delivery results.\r\n      <\/p>\r\n    <\/div>\r\n    <span class=\"umx-badge\">Courier app<\/span>\r\n  <\/header>\r\n\r\n  <div class=\"umx-acc\" data-umx-acc>\r\n    <!-- HOME & MAP \/ WAITING FOR ROUTE -->\r\n    <article class=\"umx-acc__item\" id=\"courier-home-doc\" data-doc-card=\"true\">\r\n      <button class=\"umx-acc__btn\" type=\"button\" aria-expanded=\"false\" aria-controls=\"courier-home-body\">\r\n        <div class=\"umx-acc__main\">\r\n          <h3 class=\"umx-acc__name\">Home &amp; map<\/h3>\r\n          <p class=\"umx-acc__desc\">See your position, wait for a route and navigate to the hub.<\/p>\r\n        <\/div>\r\n        <div class=\"umx-acc__right\">\r\n          <span class=\"umx-chip\">Home \u00b7 Map \u00b7 Navigation<\/span>\r\n          <span class=\"umx-caret\" aria-hidden=\"true\">\u25be<\/span>\r\n        <\/div>\r\n      <\/button>\r\n\r\n      <div class=\"umx-acc__panel\" id=\"courier-home-body\" hidden>\r\n        <h4 class=\"umx-h4\">When you open the app<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>After logging in, you land on the <strong>Home<\/strong> map screen.<\/li>\r\n          <li>Your current position is shown as a blue dot on the map.<\/li>\r\n          <li>\r\n            At the bottom you see an orange bar that says\r\n            <strong>\u201cWaiting for route assignment\u2026\u201d<\/strong>. This means dispatch has not\r\n            assigned a route to you yet.\r\n          <\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">When a route is assigned<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>\r\n            As soon as a route is assigned, the bottom area changes to a card that says\r\n            <strong>Direction to hub<\/strong>.\r\n          <\/li>\r\n          <li>\r\n            The map now shows a <strong>line<\/strong> from your current position to the\r\n            <strong>hub<\/strong> location (red pin).\r\n          <\/li>\r\n          <li>\r\n            Use the map to drive to the hub. If available, you can tap the navigation icon\r\n            on the card to open driving directions in your navigation app.\r\n          <\/li>\r\n          <li>\r\n            When you reach the hub, tap the blue button <strong>Arrived At Hub<\/strong>.\r\n            This confirms to the system that you are ready to start loading parcels.\r\n          <\/li>\r\n        <\/ol>\r\n\r\n        <div class=\"umx-note\">\r\n          <strong>Tip:<\/strong> always tap <strong>Arrived At Hub<\/strong> only after you are actually at the\r\n          correct hub, so loading and tracking times are accurate.\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- LOADING & SCANNING AT HUB -->\r\n    <article class=\"umx-acc__item\" id=\"courier-loading-doc\" data-doc-card=\"true\">\r\n      <button class=\"umx-acc__btn\" type=\"button\" aria-expanded=\"false\" aria-controls=\"courier-loading-body\">\r\n        <div class=\"umx-acc__main\">\r\n          <h3 class=\"umx-acc__name\">Loading parcels at the hub<\/h3>\r\n          <p class=\"umx-acc__desc\">Start loading and scan each parcel into your vehicle.<\/p>\r\n        <\/div>\r\n        <div class=\"umx-acc__right\">\r\n          <span class=\"umx-chip\">Start loading \u00b7 Scan parcels<\/span>\r\n          <span class=\"umx-caret\" aria-hidden=\"true\">\u25be<\/span>\r\n        <\/div>\r\n      <\/button>\r\n\r\n      <div class=\"umx-acc__panel\" id=\"courier-loading-body\" hidden>\r\n        <h4 class=\"umx-h4\">How to start loading<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>\r\n            After you tap <strong>Arrived At Hub<\/strong>, the bottom card changes to a\r\n            white panel with the message:\r\n            <em>\u201cPlease tap on \u2018Start Loading\u2019 once loading parcels are started.\u201d<\/em>\r\n          <\/li>\r\n          <li>\r\n            When you are ready to begin loading parcels into your vehicle, tap the blue\r\n            button <strong>Start Loading\u2026<\/strong>.\r\n          <\/li>\r\n          <li>The app opens the <strong>barcode scanner<\/strong> view.<\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">How to scan parcels at the hub<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>\r\n            The camera view shows a frame on the screen and a counter at the top\r\n            (for example <strong>\u201c19 remaining parcels to load\u201d<\/strong>).\r\n          <\/li>\r\n          <li>\r\n            Take a parcel, find its barcode and move your phone so that the barcode is\r\n            inside the frame.\r\n          <\/li>\r\n          <li>\r\n            Hold the phone steady until the app reads the barcode. The remaining counter\r\n            decreases by one.\r\n          <\/li>\r\n          <li>Repeat this for each parcel until the counter reaches zero.<\/li>\r\n          <li>\r\n            When all parcels are scanned, the loading step is complete and the system\r\n            creates the <strong>route<\/strong> with the missions in the correct order.\r\n          <\/li>\r\n        <\/ol>\r\n\r\n        <div class=\"umx-note\">\r\n          <strong>Tip:<\/strong> if a parcel barcode does not scan, clean the label and try again. If it still\r\n          fails, follow your local procedure (for example manual entry or contact a supervisor).\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- DELIVERING PARCELS & REPORTING RESULTS -->\r\n    <article class=\"umx-acc__item\" id=\"courier-delivery-doc\" data-doc-card=\"true\">\r\n      <button class=\"umx-acc__btn\" type=\"button\" aria-expanded=\"false\" aria-controls=\"courier-delivery-body\">\r\n        <div class=\"umx-acc__main\">\r\n          <h3 class=\"umx-acc__name\">Delivering parcels on the route<\/h3>\r\n          <p class=\"umx-acc__desc\">Follow the missions, call the customer and report delivery outcomes.<\/p>\r\n        <\/div>\r\n        <div class=\"umx-acc__right\">\r\n          <span class=\"umx-chip\">Missions \u00b7 Call \u00b7 Delivery result<\/span>\r\n          <span class=\"umx-caret\" aria-hidden=\"true\">\u25be<\/span>\r\n        <\/div>\r\n      <\/button>\r\n\r\n      <div class=\"umx-acc__panel\" id=\"courier-delivery-body\" hidden>\r\n        <h4 class=\"umx-h4\">Following the route<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>\r\n            After loading, the system arranges your stops as <strong>missions<\/strong>\r\n            in an optimised order.\r\n          <\/li>\r\n          <li>\r\n            Use the app\u2019s navigation controls (or your external navigation app, if\r\n            integrated) to drive to the first mission, then to each next mission in the\r\n            list.\r\n          <\/li>\r\n          <li>\r\n            For each mission you normally see:\r\n            <ul class=\"umx-ul\">\r\n              <li>Customer name and address.<\/li>\r\n              <li>The parcel(s) that should be delivered here.<\/li>\r\n              <li>Buttons for actions such as <strong>Call<\/strong> or <strong>Scan<\/strong>.<\/li>\r\n            <\/ul>\r\n          <\/li>\r\n          <li>\r\n            If you need to contact the customer while you are on the way or at the door,\r\n            tap the <strong>Call<\/strong> button. Your phone dials the customer\u2019s number\r\n            directly (according to local telephony rules).\r\n          <\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">Scanning and reporting the delivery result<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>When you arrive at the delivery address, open the mission in the app.<\/li>\r\n          <li>Tap the <strong>Scan<\/strong> action to open the barcode scanner for the parcel.<\/li>\r\n          <li>\r\n            Scan the parcel barcode in the same way as at the hub, by placing it inside\r\n            the frame until the app reads it.\r\n          <\/li>\r\n          <li>\r\n            After a successful scan, the app asks what happened with this parcel.\r\n            Choose one of the options:\r\n            <ul class=\"umx-ul\">\r\n              <li><strong>Delivered<\/strong> \u2013 the customer received the parcel.<\/li>\r\n              <li>\r\n                <strong>Not delivered<\/strong> \u2013 you could not deliver the parcel.\r\n                If you choose this, you must select a reason.\r\n              <\/li>\r\n            <\/ul>\r\n          <\/li>\r\n          <li>\r\n            For <strong>Not delivered<\/strong>, choose the correct reason:\r\n            <ul class=\"umx-ul\">\r\n              <li>\r\n                <strong>Unreachable customer<\/strong> \u2013 you could not reach the customer\r\n                (no answer at door or phone).\r\n              <\/li>\r\n              <li>\r\n                <strong>Unreachable address<\/strong> \u2013 you could not find or access the address\r\n                (for example wrong address, gate closed).\r\n              <\/li>\r\n              <li>\r\n                <strong>Unreachable courier<\/strong> \u2013 technical or courier-related issue\r\n                that prevented delivery (for example vehicle problem).\r\n              <\/li>\r\n            <\/ul>\r\n          <\/li>\r\n          <li>\r\n            After you select the correct outcome, the mission status is updated and the app\r\n            moves you to the next mission in the route.\r\n          <\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">Finishing the route<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>\r\n            When all parcels in the route are processed (either delivered or marked as\r\n            not delivered), the app offers an option to <strong>End route<\/strong>.\r\n          <\/li>\r\n          <li>\r\n            Tap <strong>End route<\/strong> to confirm that you have completed all missions\r\n            for this route.\r\n          <\/li>\r\n          <li>\r\n            The route status changes to <strong>Done<\/strong> in the route list and you\r\n            return to the home or routes screen, depending on configuration.\r\n          <\/li>\r\n        <\/ol>\r\n\r\n        <div class=\"umx-note\">\r\n          <strong>Tip:<\/strong> make sure every parcel has a final status before you end the route. This\r\n          ensures correct statistics and avoids missing parcels.\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- SIDE MENU, PROFILE & ROUTES -->\r\n    <article class=\"umx-acc__item\" id=\"courier-menu-profile-routes-doc\" data-doc-card=\"true\">\r\n      <button class=\"umx-acc__btn\" type=\"button\" aria-expanded=\"false\" aria-controls=\"courier-menu-body\">\r\n        <div class=\"umx-acc__main\">\r\n          <h3 class=\"umx-acc__name\">Side menu, profile &amp; routes<\/h3>\r\n          <p class=\"umx-acc__desc\">Use the drawer menu to access profile, route history and logout.<\/p>\r\n        <\/div>\r\n        <div class=\"umx-acc__right\">\r\n          <span class=\"umx-chip\">Menu \u00b7 Profile \u00b7 Routes<\/span>\r\n          <span class=\"umx-caret\" aria-hidden=\"true\">\u25be<\/span>\r\n        <\/div>\r\n      <\/button>\r\n\r\n      <div class=\"umx-acc__panel\" id=\"courier-menu-body\" hidden>\r\n        <h4 class=\"umx-h4\">How to open the side menu<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>\r\n            On most screens you see a <strong>menu icon<\/strong> (three lines) or your\r\n            <strong>profile picture<\/strong>.\r\n          <\/li>\r\n          <li>\r\n            Tap the menu or profile picture to open the <strong>side menu<\/strong>\r\n            (drawer) from the left.\r\n          <\/li>\r\n          <li>\r\n            The side menu shows your avatar, name and email, and these options:\r\n            <ul class=\"umx-ul\">\r\n              <li><strong>Home<\/strong><\/li>\r\n              <li><strong>Profile<\/strong><\/li>\r\n              <li><strong>Routes<\/strong><\/li>\r\n              <li><strong>Logout<\/strong><\/li>\r\n            <\/ul>\r\n          <\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">Profile screen<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>In the side menu, tap <strong>Profile<\/strong>.<\/li>\r\n          <li>\r\n            The <strong>Profile<\/strong> screen shows:\r\n            <ul class=\"umx-ul\">\r\n              <li>Your full name and email at the top.<\/li>\r\n              <li>A <strong>Personal Information<\/strong> card with name, phone and email.<\/li>\r\n              <li>\r\n                A <strong>Time Settings<\/strong> card with server time and your configured\r\n                region\/time zone.\r\n              <\/li>\r\n            <\/ul>\r\n          <\/li>\r\n          <li>\r\n            Depending on configuration, some information may be read-only and can only be\r\n            changed by your administrator.\r\n          <\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">Routes list and statuses<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>In the side menu, tap <strong>Routes<\/strong> to see all routes assigned to you.<\/li>\r\n          <li>\r\n            At the top-right you can see the total number of routes (for example\r\n            <em>\u201c10 routes\u201d<\/em> or <em>\u201c20 routes\u201d<\/em>).\r\n          <\/li>\r\n          <li>\r\n            Each route appears as a card with:\r\n            <ul class=\"umx-ul\">\r\n              <li>A <strong>status badge<\/strong> (Loading, Scheduled, Done).<\/li>\r\n              <li>The route name (including date, hub and time window).<\/li>\r\n              <li>The <strong>hub<\/strong> for this route.<\/li>\r\n              <li>The planned <strong>time window<\/strong> (for example <em>08:00\u201309:13<\/em>).<\/li>\r\n              <li>\r\n                Summary info such as number of <strong>missions<\/strong>, estimated\r\n                duration and distance.\r\n              <\/li>\r\n              <li>The creation time of the route and the courier ID.<\/li>\r\n              <li>A blue button <strong>View Missions<\/strong> to open the list of stops.<\/li>\r\n            <\/ul>\r\n          <\/li>\r\n        <\/ol>\r\n\r\n        <h4 class=\"umx-h4\">Route status meanings<\/h4>\r\n        <ul class=\"umx-ul\">\r\n          <li>\r\n            <strong>Loading<\/strong> (orange badge) \u2013 you are in the process of loading or\r\n            working on this route right now.\r\n          <\/li>\r\n          <li>\r\n            <strong>Scheduled<\/strong> (blue badge) \u2013 the route is planned for the future,\r\n            but has not started yet.\r\n          <\/li>\r\n          <li>\r\n            <strong>Done<\/strong> (green badge) \u2013 the route is completed. All missions have\r\n            a final status and the route is closed.\r\n          <\/li>\r\n        <\/ul>\r\n\r\n        <h4 class=\"umx-h4\">How to log out<\/h4>\r\n        <ol class=\"umx-ol\">\r\n          <li>Open the side menu.<\/li>\r\n          <li>Tap <strong>Logout<\/strong>.<\/li>\r\n          <li>\r\n            Confirm if the app asks you. You are returned to the login screen and your\r\n            session is closed on this device.\r\n          <\/li>\r\n        <\/ol>\r\n\r\n        <div class=\"umx-note\">\r\n          <strong>Tip:<\/strong> check the <strong>Routes<\/strong> screen at the start of your shift to see\r\n          which routes are scheduled, and use the <strong>Done<\/strong> routes list to\r\n          review your completed work if needed.\r\n        <\/div>\r\n      <\/div>\r\n    <\/article>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  \/* ===== Same system as your sample (scoped) ===== *\/\r\n  #courier-app-docs.umx-doc{\r\n    --deep:#0F2C3E;\r\n    --mint:#00D09C;\r\n    --bondi:#0396a6;\r\n    --white:#FFFFFF;\r\n    --platinum:#F4F6F8;\r\n\r\n    --border: rgba(244,246,248,.18);\r\n    --soft: rgba(255,255,255,.06);\r\n    --soft2: rgba(6,37,52,.42);\r\n    --text: rgba(255,255,255,.92);\r\n    --muted: rgba(255,255,255,.72);\r\n\r\n    padding: 18px;\r\n    border-radius: 28px;\r\n    border: 1px dashed rgba(244,246,248,.45);\r\n    background: var(--soft);\r\n    box-shadow: 0 14px 34px rgba(0,0,0,.18);\r\n    color: var(--text);\r\n  }\r\n  #courier-app-docs.umx-doc *{ box-sizing:border-box; }\r\n\r\n  #courier-app-docs .umx-doc__head{\r\n    display:flex;\r\n    align-items:flex-start;\r\n    justify-content:space-between;\r\n    gap:12px;\r\n    flex-wrap:wrap;\r\n    margin-bottom: 14px;\r\n  }\r\n  #courier-app-docs .umx-doc__title{\r\n    margin:0;\r\n    font-size: 18px;\r\n    letter-spacing:.04em;\r\n    text-transform: uppercase;\r\n    color: var(--text);\r\n  }\r\n  #courier-app-docs .umx-doc__subtitle{\r\n    margin: 6px 0 0;\r\n    font-size: 13px;\r\n    color: var(--muted);\r\n    max-width: 820px;\r\n  }\r\n  #courier-app-docs .umx-badge{\r\n    font-size: 11px;\r\n    padding: 6px 10px;\r\n    border-radius: 999px;\r\n    border: 1px solid rgba(244,246,248,.18);\r\n    background: rgba(255,255,255,.06);\r\n    color: rgba(255,255,255,.86);\r\n    white-space:nowrap;\r\n  }\r\n\r\n  #courier-app-docs .umx-acc{ display:flex; flex-direction:column; gap: 12px; margin-top: 12px; }\r\n\r\n  #courier-app-docs .umx-acc__item{\r\n    border-radius: 22px;\r\n    border: 1px solid var(--border);\r\n    background: var(--soft2);\r\n    box-shadow: 0 16px 40px rgba(0,0,0,.18);\r\n    overflow:hidden;\r\n  }\r\n\r\n  #courier-app-docs .umx-acc__btn{\r\n    width:100%;\r\n    text-align:left;\r\n    border:0;\r\n    background:transparent;\r\n    color:inherit;\r\n    cursor:pointer;\r\n    padding: 14px 14px;\r\n    display:flex;\r\n    align-items:flex-start;\r\n    justify-content:space-between;\r\n    gap: 12px;\r\n  }\r\n  #courier-app-docs .umx-acc__btn:focus-visible{\r\n    outline:none;\r\n    box-shadow: 0 0 0 4px rgba(0,208,156,.22) inset;\r\n  }\r\n\r\n  #courier-app-docs .umx-acc__main{ min-width:0; }\r\n  #courier-app-docs .umx-acc__name{ margin:0; font-size: 15px; color: rgba(255,255,255,.95); }\r\n  #courier-app-docs .umx-acc__desc{ margin: 4px 0 0; font-size: 12.5px; color: rgba(255,255,255,.70); }\r\n\r\n  #courier-app-docs .umx-acc__right{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }\r\n\r\n  #courier-app-docs .umx-chip{\r\n    font-size: 11px;\r\n    padding: 6px 10px;\r\n    border-radius: 999px;\r\n    border: 1px solid rgba(244,246,248,.16);\r\n    background: rgba(255,255,255,.06);\r\n    color: rgba(255,255,255,.86);\r\n    white-space:nowrap;\r\n  }\r\n\r\n  #courier-app-docs .umx-caret{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    width: 32px;\r\n    height: 32px;\r\n    border-radius: 999px;\r\n    border: 1px solid rgba(244,246,248,.14);\r\n    background: rgba(255,255,255,.06);\r\n    color: rgba(255,255,255,.9);\r\n    transition: transform .18s ease;\r\n    user-select:none;\r\n  }\r\n  #courier-app-docs .umx-acc__btn[aria-expanded=\"true\"] .umx-caret{ transform: rotate(180deg); }\r\n\r\n  #courier-app-docs .umx-acc__panel{\r\n    padding: 0 14px 14px;\r\n    border-top: 1px dashed rgba(244,246,248,.16);\r\n  }\r\n\r\n  #courier-app-docs .umx-h4{ margin: 12px 0 6px; font-size: 13px; color: rgba(255,255,255,.92); letter-spacing:.02em; }\r\n\r\n  #courier-app-docs .umx-ol{\r\n    margin: 0 0 10px 18px;\r\n    padding: 0;\r\n    font-size: 12.5px;\r\n    color: rgba(255,255,255,.78);\r\n  }\r\n  #courier-app-docs .umx-ol li{ margin: 6px 0; }\r\n\r\n  #courier-app-docs .umx-ul{\r\n    margin: 6px 0 10px 18px;\r\n    padding: 0;\r\n    font-size: 12.5px;\r\n    color: rgba(255,255,255,.78);\r\n  }\r\n  #courier-app-docs .umx-ul li{ margin: 4px 0; }\r\n\r\n  #courier-app-docs .umx-note{\r\n    margin-top: 10px;\r\n    padding: 10px 12px;\r\n    border-radius: 16px;\r\n    border: 1px solid rgba(0,208,156,.22);\r\n    background: rgba(0,208,156,.10);\r\n    color: rgba(255,255,255,.88);\r\n    font-size: 12.5px;\r\n  }\r\n\r\n  @media (max-width: 900px){\r\n    #courier-app-docs .umx-acc__btn{ padding: 12px; }\r\n    #courier-app-docs .umx-acc__panel{ padding: 0 12px 12px; }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  (function(){\r\n    const root = document.querySelector('#courier-app-docs');\r\n    if(!root) return;\r\n\r\n    const items = root.querySelectorAll('.umx-acc__item');\r\n    items.forEach((item) => {\r\n      const btn = item.querySelector('.umx-acc__btn');\r\n      const panel = item.querySelector('.umx-acc__panel');\r\n      if(!btn || !panel) return;\r\n\r\n      panel.hidden = true;\r\n      btn.setAttribute('aria-expanded', 'false');\r\n\r\n      btn.addEventListener('click', () => {\r\n        const isOpen = btn.getAttribute('aria-expanded') === 'true';\r\n\r\n        items.forEach((it) => {\r\n          const b = it.querySelector('.umx-acc__btn');\r\n          const p = it.querySelector('.umx-acc__panel');\r\n          if(!b || !p) return;\r\n          b.setAttribute('aria-expanded', 'false');\r\n          p.hidden = true;\r\n        });\r\n\r\n        btn.setAttribute('aria-expanded', String(!isOpen));\r\n        panel.hidden = isOpen;\r\n      });\r\n    });\r\n  })();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>Choose your area Start from the side that matches your role. You can always switch between views later. Retailer side Retailer dashboard \ud83d\udce6 For retailers. Set up order management and order tracking in Ecolos+. You\u2019ll find Hub \/ terminal specification Order status tracking Order delivery statistics Go to retailer manual \u2192 Focus: order management &amp; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-956","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/intelligentcomputingtrends.com\/en\/wp-json\/wp\/v2\/pages\/956","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/intelligentcomputingtrends.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/intelligentcomputingtrends.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/intelligentcomputingtrends.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/intelligentcomputingtrends.com\/en\/wp-json\/wp\/v2\/comments?post=956"}],"version-history":[{"count":22,"href":"https:\/\/intelligentcomputingtrends.com\/en\/wp-json\/wp\/v2\/pages\/956\/revisions"}],"predecessor-version":[{"id":983,"href":"https:\/\/intelligentcomputingtrends.com\/en\/wp-json\/wp\/v2\/pages\/956\/revisions\/983"}],"wp:attachment":[{"href":"https:\/\/intelligentcomputingtrends.com\/en\/wp-json\/wp\/v2\/media?parent=956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}