From e2512b0f86f04847622c342dc2c128e29988345d Mon Sep 17 00:00:00 2001
From: johnnyq <johnny@pittpc.com>
Date: Fri, 14 Aug 2026 18:32:33 -0400
Subject: [PATCH] Fixed Side nav titles, Fixed ajax on bootstrap modals, fixed
 pagination all regressions

---
 admin/includes/side_nav.php                 | 14 ++-
 admin/modals/user/user_add.php              |  2 +-
 admin/modals/user/user_edit.php             |  2 +-
 agent/asset.php                             |  2 +-
 agent/client_overview.php                   |  2 +-
 agent/contact.php                           |  4 +-
 agent/custom/includes/custom_side_nav.php   | 11 +--
 agent/includes/client_overview_side_nav.php | 11 +--
 agent/includes/client_side_nav.php          | 14 ++-
 agent/includes/side_nav.php                 |  9 +-
 agent/js/certificate_fetch_ssl.js           |  2 +-
 agent/js/credential_show_otp_via_id.js      |  2 +-
 agent/js/credential_show_password_via_id.js |  4 +-
 agent/js/generate_password.js               |  2 +-
 agent/js/share_modal.js                     |  2 +-
 agent/js/ticket_collision_detection.js      |  4 +-
 agent/js/tickets_add_modal.js               | 10 +--
 agent/modals/asset/asset.php                |  2 +-
 agent/modals/client/client_add.php          |  2 +-
 agent/modals/contact/contact_add.php        |  4 +-
 agent/modals/contact/contact_edit.php       |  2 +-
 agent/modals/domain/domain_add.php          |  2 +-
 agent/reports/includes/reports_side_nav.php | 11 +--
 agent/user/includes/user_side_nav.php       | 14 ++-
 agent/user/mfa_enforcement.php              |  1 +
 client/includes/footer.php                  |  1 +
 css/itflow_custom.css                       | 37 ++++++--
 guest/guest_view_item.php                   |  2 +-
 includes/footer.php                         |  1 +
 includes/modal_footer.php                   |  1 +
 js/ajax_modal.js                            | 57 +++++++++---
 js/app.js                                   | 74 +++++++---------
 js/credential_show_otp_via_id.js            |  2 +-
 js/http.js                                  | 96 +++++++++++++++++++++
 js/keepalive.js                             |  2 +-
 setup/index.php                             |  8 +-
 36 files changed, 282 insertions(+), 134 deletions(-)
 create mode 100644 js/http.js

diff --git a/admin/includes/side_nav.php b/admin/includes/side_nav.php
index 8b9b8a4d4..87f8d23a5 100644
--- a/admin/includes/side_nav.php
+++ b/admin/includes/side_nav.php
@@ -1,13 +1,11 @@
 <!-- Main Sidebar Container -->
 <aside class="app-sidebar shadow d-print-none" data-bs-theme="dark">
-    <a class="brand-link pb-1 mt-1" href="/agent/<?= $config_start_page ?>">
-        <p class="h6">
-            <i class="nav-icon fas fa-arrow-left ms-3 me-2"></i>
-            <span class="brand-text">
-                Back | <strong>Administration</strong>
-            </span>
-        </p>
-    </a>
+    <div class="sidebar-brand">
+        <a class="brand-link" href="/agent/<?= $config_start_page ?>">
+            <i class="fas fa-arrow-left me-2"></i>
+            <span class="brand-text h6 mb-0">Back | <strong>Administration</strong></span>
+        </a>
+    </div>
 
     <!-- Sidebar -->
     <div class="sidebar-wrapper">
diff --git a/admin/modals/user/user_add.php b/admin/modals/user/user_add.php
index 2a8865057..2a2924131 100644
--- a/admin/modals/user/user_add.php
+++ b/admin/modals/user/user_add.php
@@ -163,7 +163,7 @@ ob_start();
 <script>
 
 function generatePassword() {
-    jQuery.get(
+    itflowGet(
         "/agent/ajax.php", {
             get_readable_pass: 'true'
         },
diff --git a/admin/modals/user/user_edit.php b/admin/modals/user/user_edit.php
index 1aa43967e..da8e77307 100644
--- a/admin/modals/user/user_edit.php
+++ b/admin/modals/user/user_edit.php
@@ -215,7 +215,7 @@ ob_start();
 
 function generatePassword() {
     // Send a GET request to ajax.php as ajax.php?get_readable_pass=true
-    jQuery.get(
+    itflowGet(
         "/agent/ajax.php", {
             get_readable_pass: 'true'
         },
diff --git a/agent/asset.php b/agent/asset.php
index 8d126f78f..d3af6e1ad 100644
--- a/agent/asset.php
+++ b/agent/asset.php
@@ -1338,7 +1338,7 @@ if (isset($_GET['asset_id'])) {
             var notes = document.getElementById("assetNotes").value;
 
             // Send a POST request to ajax.php as ajax.php with data contact_set_notes=true, contact_id=NUM, notes=NOTES
-            jQuery.post(
+            itflowPost(
                 "ajax.php",
                 {
                     asset_set_notes: 'TRUE',
diff --git a/agent/client_overview.php b/agent/client_overview.php
index 6b472a109..441e95dfb 100644
--- a/agent/client_overview.php
+++ b/agent/client_overview.php
@@ -811,7 +811,7 @@ $sql_asset_retired = mysqli_query(
         var notes = document.getElementById("clientNotes").value;
 
         // Send a POST request to ajax.php as ajax.php with data client_set_notes=true, client_id=NUM, notes=NOTES
-        jQuery.post(
+        itflowPost(
             "ajax.php",
             {
                 client_set_notes: 'TRUE',
diff --git a/agent/contact.php b/agent/contact.php
index 6f5cc0f73..19f0cfda7 100644
--- a/agent/contact.php
+++ b/agent/contact.php
@@ -1193,7 +1193,7 @@ if (isset($_GET['contact_id'])) {
             var notes = document.getElementById("contactNotes").value;
 
             // Send a POST request to ajax.php as ajax.php with data contact_set_notes=true, contact_id=NUM, notes=NOTES
-            jQuery.post(
+            itflowPost(
                 "ajax.php",
                 {
                     contact_set_notes: 'TRUE',
@@ -1210,7 +1210,7 @@ if (isset($_GET['contact_id'])) {
 
         function generatePassword(type, id) {
             // Send a GET request to ajax.php as ajax.php?get_readable_pass=true
-            jQuery.get(
+            itflowGet(
                 "ajax.php", {
                     get_readable_pass: 'true'
                 },
diff --git a/agent/custom/includes/custom_side_nav.php b/agent/custom/includes/custom_side_nav.php
index 25e7d0fda..506404e66 100644
--- a/agent/custom/includes/custom_side_nav.php
+++ b/agent/custom/includes/custom_side_nav.php
@@ -1,11 +1,12 @@
 <!-- Main Sidebar Container -->
 <aside class="app-sidebar shadow d-print-none" data-bs-theme="dark">
 
-    <a class="pb-1 mt-1 brand-link" href="../<?= $config_start_page ?>">
-        <p class="h5"><i class="nav-icon fas fa-arrow-left ms-3 me-2"></i>
-            <span class="brand-text ">Back | <strong>Custom</strong>
-        </p>
-    </a>
+    <div class="sidebar-brand">
+        <a class="brand-link" href="../<?= $config_start_page ?>">
+            <i class="fas fa-arrow-left me-2"></i>
+            <span class="brand-text h5 mb-0">Back | <strong>Custom</strong></span>
+        </a>
+    </div>
 
     <!-- Sidebar -->
     <div class="sidebar-wrapper">
diff --git a/agent/includes/client_overview_side_nav.php b/agent/includes/client_overview_side_nav.php
index 5a4f11bb4..106ff9fd0 100644
--- a/agent/includes/client_overview_side_nav.php
+++ b/agent/includes/client_overview_side_nav.php
@@ -33,11 +33,12 @@ $num_software = $row['num'];
 <!-- Main Sidebar Container -->
 <aside class="app-sidebar shadow d-print-none" data-bs-theme="dark">
 
-    <a class="pb-1 mt-1 brand-link" href="clients.php">
-        <p class="h6"><i class="nav-icon fas fa-arrow-left ms-3 me-2"></i>
-            <span class="brand-text ">Back | <strong>All Client Docs</strong>
-        </p>
-    </a>
+    <div class="sidebar-brand">
+        <a class="brand-link" href="clients.php">
+            <i class="fas fa-arrow-left me-2"></i>
+            <span class="brand-text h6 mb-0">Back | <strong>All Client Docs</strong></span>
+        </a>
+    </div>
 
     <!-- Sidebar -->
     <div class="sidebar-wrapper">
diff --git a/agent/includes/client_side_nav.php b/agent/includes/client_side_nav.php
index 05ab4f9d4..2f5369fa5 100644
--- a/agent/includes/client_side_nav.php
+++ b/agent/includes/client_side_nav.php
@@ -1,14 +1,12 @@
 <!-- Main Sidebar Container -->
 <aside class="app-sidebar shadow d-print-none" data-bs-theme="dark">
 
-    <a class="brand-link pb-1 mt-1" href="/agent/clients.php">
-        <p class="h5">
-            <i class="nav-icon fas fa-arrow-left ms-3 me-1"></i>
-             <span class="brand-text">
-                 Back | <strong><?= $client_name_truncated ?></strong>
-            </span>
-        </p>
-    </a>
+    <div class="sidebar-brand">
+        <a class="brand-link" href="/agent/clients.php">
+            <i class="fas fa-arrow-left me-2"></i>
+            <span class="brand-text h5 mb-0">Back | <strong><?= $client_name_truncated ?></strong></span>
+        </a>
+    </div>
 
     <!-- Sidebar -->
     <div class="sidebar-wrapper">
diff --git a/agent/includes/side_nav.php b/agent/includes/side_nav.php
index 2fcd9b6df..0037572e9 100644
--- a/agent/includes/side_nav.php
+++ b/agent/includes/side_nav.php
@@ -1,10 +1,11 @@
 <!-- Main Sidebar Container -->
 <aside class="app-sidebar shadow d-print-none" data-bs-theme="dark">
 
-    <a class="brand-link" href="/agent/dashboard.php">
-        <div class="brand-image"></div>
-        <span class="brand-text h4"><?= escapeHtml($session_company_name) ?></span>
-    </a>
+    <div class="sidebar-brand">
+        <a class="brand-link" href="/agent/dashboard.php">
+            <span class="brand-text h4"><?= escapeHtml($session_company_name) ?></span>
+        </a>
+    </div>
 
     <!-- Sidebar -->
     <div class="sidebar-wrapper">
diff --git a/agent/js/certificate_fetch_ssl.js b/agent/js/certificate_fetch_ssl.js
index 57970b10a..9f4580454 100644
--- a/agent/js/certificate_fetch_ssl.js
+++ b/agent/js/certificate_fetch_ssl.js
@@ -16,7 +16,7 @@ function fetchSSL(type)
     }
 
     //Send a GET request to post.php as post.php?certificate_fetch_parse_json_details=TRUE&domain=DOMAIN
-    jQuery.get(
+    itflowGet(
         "ajax.php",
         {certificate_fetch_parse_json_details: 'TRUE', domain: domain},
         function(data) {
diff --git a/agent/js/credential_show_otp_via_id.js b/agent/js/credential_show_otp_via_id.js
index 43e34328a..bd078031c 100644
--- a/agent/js/credential_show_otp_via_id.js
+++ b/agent/js/credential_show_otp_via_id.js
@@ -1,6 +1,6 @@
 function showOTPViaCredentialID(credential_id) {
     // Send a GET request to ajax.php as ajax.php?get_totp_token_via_id=true&credential_id=ID
-    jQuery.get(
+    itflowGet(
         "ajax.php", {
             get_totp_token_via_id: 'true',
             credential_id: credential_id
diff --git a/agent/js/credential_show_password_via_id.js b/agent/js/credential_show_password_via_id.js
index 6989046fe..00c959c74 100644
--- a/agent/js/credential_show_password_via_id.js
+++ b/agent/js/credential_show_password_via_id.js
@@ -1,6 +1,6 @@
 function showPasswordViaCredentialID(button, credential_id) {
     // Send a GET request to ajax.php as ajax.php?get_credential_via_id=true&credential_id=ID
-    jQuery.get(
+    itflowGet(
         "ajax.php", {
             get_credential_via_id: 'true',
             credential_id: credential_id
@@ -21,7 +21,7 @@ function showPasswordViaCredentialID(button, credential_id) {
 }
 
 function copyPasswordViaCredentialID(button, credential_id) {
-    jQuery.get(
+    itflowGet(
         "ajax.php", {
             get_credential_via_id: 'true',
             credential_id: credential_id
diff --git a/agent/js/generate_password.js b/agent/js/generate_password.js
index fe31eebc7..a8dc7025a 100644
--- a/agent/js/generate_password.js
+++ b/agent/js/generate_password.js
@@ -1,6 +1,6 @@
 function generatePassword(login_id) {
     // Send a GET request to ajax.php as ajax.php?get_readable_pass=true
-    jQuery.get(
+    itflowGet(
         "ajax.php", {
             get_readable_pass: 'true'
         },
diff --git a/agent/js/share_modal.js b/agent/js/share_modal.js
index 2afec0e12..c888ca43d 100644
--- a/agent/js/share_modal.js
+++ b/agent/js/share_modal.js
@@ -33,7 +33,7 @@ function generateShareLink() {
     // Check values are provided
     if (item_expires) {
         // Send a GET request to ajax.php as ajax.php?share_generate_link=true....
-        jQuery.get(
+        itflowGet(
             "ajax.php",
             {share_generate_link: 'true', csrf_token: csrf_token, client_id: client_id, type: item_type, id: item_ref_id, note: item_note ,views: item_views, expires: item_expires, contact_email},
             function(data) {
diff --git a/agent/js/ticket_collision_detection.js b/agent/js/ticket_collision_detection.js
index f7bfc9668..c5bf83d8c 100644
--- a/agent/js/ticket_collision_detection.js
+++ b/agent/js/ticket_collision_detection.js
@@ -7,7 +7,7 @@ function ticket_collision_detection() {
     var ticket_id = document.getElementById("ticket_id").value;
 
     //Send a GET request to ajax.php as ajax.php?ticket_add_view=true&ticket_id=NUMBER
-    jQuery.get(
+    itflowGet(
         "ajax.php",
         {ticket_add_view: 'true', ticket_id: ticket_id},
         function(data) {
@@ -16,7 +16,7 @@ function ticket_collision_detection() {
     );
 
     //Send a GET request to ajax.php as ajax.php?ticket_query_views=true&ticket_id=NUMBER
-    jQuery.get(
+    itflowGet(
         "ajax.php",
         {ticket_query_views: 'true', ticket_id: ticket_id},
         function(data) {
diff --git a/agent/js/tickets_add_modal.js b/agent/js/tickets_add_modal.js
index 14406853f..1fd8a616a 100644
--- a/agent/js/tickets_add_modal.js
+++ b/agent/js/tickets_add_modal.js
@@ -164,7 +164,7 @@
         }
 
         // Send a GET request to ajax.php as ajax.php?get_client_contacts=true&client_id=NUM
-        jQuery.get(
+        itflowGet(
             "ajax.php",
             {get_client_contacts: 'true', client_id: client_id},
             function(data) {
@@ -229,7 +229,7 @@
             return;
         }
 
-        jQuery.get(
+        itflowGet(
             "ajax.php",
             {get_client_assets: 'true', client_id: client_id},
             function(data) {
@@ -279,7 +279,7 @@
             return;
         }
 
-        jQuery.get(
+        itflowGet(
             "ajax.php",
             {get_client_locations: 'true', client_id: client_id},
             function(data) {
@@ -313,7 +313,7 @@
             return;
         }
 
-        jQuery.get(
+        itflowGet(
             "ajax.php",
             {get_client_vendors: 'true', client_id: client_id},
             function(data) {
@@ -347,7 +347,7 @@
             return;
         }
 
-        jQuery.get(
+        itflowGet(
             "ajax.php",
             {get_client_projects: 'true', client_id: client_id},
             function(data) {
diff --git a/agent/modals/asset/asset.php b/agent/modals/asset/asset.php
index 9b187f98c..bd9b8abae 100644
--- a/agent/modals/asset/asset.php
+++ b/agent/modals/asset/asset.php
@@ -444,7 +444,7 @@ ob_start();
                 var notes = document.getElementById("assetNotes").value;
 
                 // Send a POST request to ajax.php as ajax.php with data contact_set_notes=true, contact_id=NUM, notes=NOTES
-                jQuery.post(
+                itflowPost(
                     "ajax.php",
                     {
                         asset_set_notes: 'TRUE',
diff --git a/agent/modals/client/client_add.php b/agent/modals/client/client_add.php
index 4a2424ee0..dc400ac2c 100644
--- a/agent/modals/client/client_add.php
+++ b/agent/modals/client/client_add.php
@@ -375,7 +375,7 @@ ob_start();
     function checkClientDuplicate() {
         var name = document.getElementById("client_name").value;
         //Send a GET request to ajax.php as ajax.php?client_duplicate_check=true&name=NAME
-        jQuery.get(
+        itflowGet(
             "ajax.php",
             {client_duplicate_check: 'true', name: name},
             function(data) {
diff --git a/agent/modals/contact/contact_add.php b/agent/modals/contact/contact_add.php
index 6392fddcf..69e7aabbf 100644
--- a/agent/modals/contact/contact_add.php
+++ b/agent/modals/contact/contact_add.php
@@ -285,7 +285,7 @@ ob_start();
 <script>
 
 function generatePassword() {
-    jQuery.get(
+    itflowGet(
         "ajax.php", {
             get_readable_pass: 'true'
         },
@@ -321,7 +321,7 @@ document.addEventListener('DOMContentLoaded', function () {
     function checkContactEmail() {
         var email = document.getElementById("contact_email").value;
         //Send a GET request to ajax.php as ajax.php?contact_email_check=true&email=email
-        jQuery.get(
+        itflowGet(
             "ajax.php",
             {contact_email_check: 'true', email: email},
             function(data) {
diff --git a/agent/modals/contact/contact_edit.php b/agent/modals/contact/contact_edit.php
index 3d018353d..590e5f5d9 100644
--- a/agent/modals/contact/contact_edit.php
+++ b/agent/modals/contact/contact_edit.php
@@ -325,7 +325,7 @@ ob_start();
 <script>
 
 function generatePassword() {
-    jQuery.get(
+    itflowGet(
         "ajax.php", {
             get_readable_pass: 'true'
         },
diff --git a/agent/modals/domain/domain_add.php b/agent/modals/domain/domain_add.php
index ccb1b056b..856c046b8 100644
--- a/agent/modals/domain/domain_add.php
+++ b/agent/modals/domain/domain_add.php
@@ -185,7 +185,7 @@ ob_start();
     function checkApexDomain() {
         var domain = document.getElementById("domain_name").value;
         //Send a GET request to ajax.php as ajax.php?apex_domain_check=true&domain=domain
-        jQuery.get(
+        itflowGet(
             "ajax.php",
             {apex_domain_check: 'true', domain: domain},
             function(data) {
diff --git a/agent/reports/includes/reports_side_nav.php b/agent/reports/includes/reports_side_nav.php
index 2e7b5b43d..b4d22063e 100644
--- a/agent/reports/includes/reports_side_nav.php
+++ b/agent/reports/includes/reports_side_nav.php
@@ -1,11 +1,12 @@
 <!-- Main Sidebar Container -->
 <aside class="app-sidebar shadow d-print-none" data-bs-theme="dark">
 
-    <a class="pb-1 mt-1 brand-link" href="/agent/<?= $config_start_page ?>">
-        <p class="h5"><i class="nav-icon fas fa-arrow-left ms-3 me-2"></i>
-            <span class="brand-text ">Back | <strong>Reports</strong>
-        </p>
-    </a>
+    <div class="sidebar-brand">
+        <a class="brand-link" href="/agent/<?= $config_start_page ?>">
+            <i class="fas fa-arrow-left me-2"></i>
+            <span class="brand-text h5 mb-0">Back | <strong>Reports</strong></span>
+        </a>
+    </div>
 
     <!-- Sidebar -->
     <div class="sidebar-wrapper">
diff --git a/agent/user/includes/user_side_nav.php b/agent/user/includes/user_side_nav.php
index a8757cfd8..6184dfa51 100644
--- a/agent/user/includes/user_side_nav.php
+++ b/agent/user/includes/user_side_nav.php
@@ -1,14 +1,12 @@
 <!-- Main Sidebar Container -->
 <aside class="app-sidebar shadow d-print-none" data-bs-theme="dark">
 
-    <a class="brand-link pb-1 mt-1" href="/agent/<?= $config_start_page ?>">
-        <p class="h5">
-            <i class="nav-icon fas fa-arrow-left ms-3 me-2"></i> 
-            <span class="brand-text">
-                Back | <strong>Account</strong>
-            </span>
-        </p>
-    </a>
+    <div class="sidebar-brand">
+        <a class="brand-link" href="/agent/<?= $config_start_page ?>">
+            <i class="fas fa-arrow-left me-2"></i>
+            <span class="brand-text h5 mb-0">Back | <strong>Account</strong></span>
+        </a>
+    </div>
 
     <!-- Sidebar -->
     <div class="sidebar-wrapper">
diff --git a/agent/user/mfa_enforcement.php b/agent/user/mfa_enforcement.php
index 51c35b709..fcf0cc767 100644
--- a/agent/user/mfa_enforcement.php
+++ b/agent/user/mfa_enforcement.php
@@ -95,6 +95,7 @@ $data = "otpauth://totp/ITFlow:$session_email?secret=$token";
     <!-- REQUIRED SCRIPTS -->
 
     <!-- Bootstrap 4 -->
+    <script src="/js/http.js"></script>
     <script src="../../libs/bootstrap/js/bootstrap.bundle.min.js"></script>
 
     <!-- Custom js-->
diff --git a/client/includes/footer.php b/client/includes/footer.php
index 9c4088add..c77e0a796 100644
--- a/client/includes/footer.php
+++ b/client/includes/footer.php
@@ -26,6 +26,7 @@
 
 <!-- Bootstrap 4 -->
 <script src="/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
+<script src="/js/http.js"></script>
 
 <!--- TinyMCE -->
 <script src="/libs/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
diff --git a/css/itflow_custom.css b/css/itflow_custom.css
index 42e475e11..aab96a3da 100644
--- a/css/itflow_custom.css
+++ b/css/itflow_custom.css
@@ -168,10 +168,19 @@ a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-li
     color: hsl(from var(--itflow-accent, #007bff) h s calc(l - 15%));
 }
 .nav-tabs .nav-link.active { color: var(--itflow-accent, #007bff); }
-.page-item .page-link { color: var(--itflow-accent, #007bff); }
-.page-item.active .page-link {
-    background-color: var(--itflow-accent, #007bff);
-    border-color: var(--itflow-accent, #007bff);
+/* Pagination. Driving Bootstrap's own variables rather than overriding
+   .page-link directly: a flat `.page-item .page-link{color:...}` ties with
+   BS5's `.active>.page-link` and `.disabled>.page-link` on specificity and,
+   because this sheet loads last, silently won both - so the active number was
+   accent-on-accent (invisible) and disabled Prev/Next lost their muted grey. */
+.pagination {
+    --bs-pagination-color: var(--itflow-accent, #007bff);
+    --bs-pagination-hover-color: color-mix(in srgb, var(--itflow-accent, #007bff) 70%, #000);
+    --bs-pagination-hover-color: hsl(from var(--itflow-accent, #007bff) h s calc(l - 15%));
+    --bs-pagination-focus-color: var(--itflow-accent, #007bff);
+    --bs-pagination-active-color: #fff;
+    --bs-pagination-active-bg: var(--itflow-accent, #007bff);
+    --bs-pagination-active-border-color: var(--itflow-accent, #007bff);
 }
 .dropdown-item.active, .dropdown-item:active {
     background-color: var(--itflow-accent, #007bff);
@@ -189,8 +198,26 @@ a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-li
 .app-sidebar {
     background-color: #343a40;
 }
-.app-sidebar .brand-link {
+/* Sidebar header. v4 scopes its brand rules under .sidebar-brand, and its own
+   defaults centre the brand in a fixed 2.75rem box. v3's .brand-link was a
+   left-aligned block, and several of these headers carry a "Back | ..." line
+   that is taller than that, so height is relaxed and alignment restored. */
+.app-sidebar .sidebar-brand {
+    /* v4 deliberately pairs .sidebar-brand{height:2.75rem} with
+       .app-header{max-height:2.75rem} so the sidebar header lines up with the
+       top bar. Keep that height and cut the vertical padding instead - v4's
+       .8125rem leaves only 18px of the 44px box, which clips even an h6. */
+    height: 2.75rem;
+    padding: .25rem .5rem;
+    justify-content: flex-start;
     background-color: #343a40;
+    border-bottom: 1px solid #4b545c;
+}
+.app-sidebar .sidebar-brand .brand-link {
+    width: 100%;
+    color: #fff;
+}
+.app-sidebar .sidebar-brand .brand-text {
     color: #fff;
 }
 .app-sidebar .sidebar-menu .nav-link,
diff --git a/guest/guest_view_item.php b/guest/guest_view_item.php
index 15e6bfbc6..97b20f840 100644
--- a/guest/guest_view_item.php
+++ b/guest/guest_view_item.php
@@ -243,7 +243,7 @@ if ($item_type == "Document") {
     <script>
         function refreshOTP() {
             // Send a GET request to guest_ajax.php as guest_ajax.php?get_share_totp_token=true&id=ID&key=KEY
-            jQuery.get(
+            itflowGet(
                 "guest_ajax.php",
                 {
                     get_share_totp_token: 'true',
diff --git a/includes/footer.php b/includes/footer.php
index d8c8368d0..2ef9b3966 100644
--- a/includes/footer.php
+++ b/includes/footer.php
@@ -30,6 +30,7 @@ if (basename(dirname($_SERVER['REQUEST_URI'])) === 'guest') { ?>
 
 <!-- Bootstrap 5 -->
 <script src="/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
+<script src="/js/http.js"></script>
 
 <!-- Custom js-->
 <script src="/libs/chart.js/chart.umd.min.js"></script>
diff --git a/includes/modal_footer.php b/includes/modal_footer.php
index bafba5115..ad1b7b524 100644
--- a/includes/modal_footer.php
+++ b/includes/modal_footer.php
@@ -1,3 +1,4 @@
+<script src="/js/http.js"></script>
 <script src="/js/autocomplete.js"></script>
 <script src="/js/app.js"></script>
 
diff --git a/js/ajax_modal.js b/js/ajax_modal.js
index 2bf39537e..84360cbb8 100644
--- a/js/ajax_modal.js
+++ b/js/ajax_modal.js
@@ -1,3 +1,36 @@
+/**
+ * Re-run <script> elements that arrived via innerHTML, strictly in order.
+ *
+ * External scripts are awaited before the next one starts; inline scripts run
+ * synchronously. Order matters because a modal's own script is emitted before
+ * modal_footer.php's http.js / autocomplete.js / app.js, and depends on them.
+ */
+function runScriptsInOrder(scripts) {
+    return scripts.reduce(function (chain, old) {
+        return chain.then(function () {
+            return new Promise(function (resolve) {
+                const s = document.createElement('script');
+                for (const attr of old.attributes) {
+                    s.setAttribute(attr.name, attr.value);
+                }
+                if (old.src) {
+                    s.async = false;
+                    s.onload = resolve;
+                    s.onerror = function () {
+                        console.error('ajax-modal: failed to load', old.src);
+                        resolve();
+                    };
+                    old.replaceWith(s);
+                } else {
+                    s.textContent = old.textContent;
+                    old.replaceWith(s);
+                    resolve();
+                }
+            });
+        });
+    }, Promise.resolve());
+}
+
 // Ajax Modal Load Script
 document.addEventListener('click', function (e) {
     const trigger = e.target.closest('.ajax-modal');
@@ -64,19 +97,17 @@ document.addEventListener('click', function (e) {
                 '</div>';
             host.appendChild(wrapper);
 
-            // innerHTML does not execute <script> tags. The modal payload ends
-            // with modal_footer.php, which re-runs app.js to wire up Tom Select,
-            // IMask, flatpickr and friends - so re-inject them by hand.
-            wrapper.querySelectorAll('script').forEach(function (old) {
-                const s = document.createElement('script');
-                for (const attr of old.attributes) {
-                    s.setAttribute(attr.name, attr.value);
-                }
-                s.textContent = old.textContent;
-                old.replaceWith(s);
-            });
-
-            bootstrap.Modal.getOrCreateInstance(wrapper).show();
+            // innerHTML does not execute <script> tags, so they have to be
+            // re-injected. They must also run IN ORDER: a modal payload loads
+            // its own script first and modal_footer.php's http.js / app.js
+            // after, and the modal script depends on helpers those define.
+            // A dynamically created <script src> is async by default and would
+            // run in completion order instead - jQuery's .append() loaded them
+            // sequentially, which is the behaviour reproduced here.
+            runScriptsInOrder(Array.from(wrapper.querySelectorAll('script')))
+                .then(function () {
+                    bootstrap.Modal.getOrCreateInstance(wrapper).show();
+                });
 
             wrapper.addEventListener('hidden.bs.modal', function () {
                 wrapper.remove();
diff --git a/js/app.js b/js/app.js
index b1e00c662..e65b60b86 100644
--- a/js/app.js
+++ b/js/app.js
@@ -8,38 +8,20 @@
  * jQuery's delegation contract so the handler bodies are unchanged.
  */
 /**
- * $.post replacement. jQuery serialised nested arrays/objects into PHP-style
- * bracket params (positions[0][status_id]=...), which is what ajax.php parses,
- * so that encoding is reproduced here rather than sending JSON.
+ * Run one initialiser in isolation.
+ *
+ * itflowInit() sets up eight independent libraries in sequence. Without this,
+ * a throw in any one of them aborts the whole function and every initialiser
+ * after it silently never runs - which is exactly the kind of failure that
+ * looks like "everything is broken" while the console shows one error from a
+ * library you were not looking at.
  */
-function itflowPostForm(url, data) {
-    const params = new URLSearchParams();
-
-    (function add(prefix, value) {
-        if (Array.isArray(value)) {
-            value.forEach(function (v, i) {
-                add(prefix + '[' + i + ']', v);
-            });
-        } else if (value !== null && typeof value === 'object') {
-            Object.keys(value).forEach(function (k) {
-                add(prefix ? prefix + '[' + k + ']' : k, value[k]);
-            });
-        } else {
-            params.append(prefix, value === true ? 'true' : String(value));
-        }
-    })('', data);
-
-    return fetch(url, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-        credentials: 'same-origin',
-        body: params.toString()
-    }).then(function (res) {
-        if (!res.ok) {
-            throw new Error('HTTP ' + res.status);
-        }
-        return res.text();
-    });
+function itflowStep(name, fn) {
+    try {
+        fn();
+    } catch (e) {
+        console.error('itflow init [' + name + '] failed:', e);
+    }
 }
 
 function itflowBindOnce(name, type, selector, handler) {
@@ -90,8 +72,10 @@ function itflowInit() {
 
     // Initialize Tom Select (replaces Select2). Every instance is reachable
     // afterwards as element.tomselect, which is how the helpers below reach it.
-    document.querySelectorAll('.select2').forEach(function (el) {
-        initTomSelect(el);
+    itflowStep('tom-select', function () {
+        document.querySelectorAll('.select2').forEach(function (el) {
+            initTomSelect(el);
+        });
     });
 
     // Initialize TinyMCE
@@ -532,23 +516,29 @@ function itflowInit() {
     // the lever, not a Bootstrap patch.
 
     // Clipboard
-    var clipboard = new ClipboardJS('.clipboardjs');
+    itflowStep('clipboard', function () {
+        var clipboard = new ClipboardJS('.clipboardjs');
 
-    clipboard.on('success', function(e) {
-        flashTooltip(e.trigger, 'Copied!');
-    });
+        clipboard.on('success', function(e) {
+            flashTooltip(e.trigger, 'Copied!');
+        });
 
-    clipboard.on('error', function(e) {
-        flashTooltip(e.trigger, 'Failed!');
+        clipboard.on('error', function(e) {
+            flashTooltip(e.trigger, 'Failed!');
+        });
     });
 
     // Enable Popovers
-    document.querySelectorAll('[data-bs-toggle="popover"]').forEach(function (el) {
-        bootstrap.Popover.getOrCreateInstance(el);
+    itflowStep('popovers', function () {
+        document.querySelectorAll('[data-bs-toggle="popover"]').forEach(function (el) {
+            bootstrap.Popover.getOrCreateInstance(el);
+        });
     });
 
     // Data Tables
-    new DataTable('.dataTables');
+    itflowStep('datatables', function () {
+        new DataTable('.dataTables');
+    });
 }
 
 // modal_footer.php re-loads this file on every ajax modal open, so run now if
diff --git a/js/credential_show_otp_via_id.js b/js/credential_show_otp_via_id.js
index 4fdf19286..25d7cab2c 100644
--- a/js/credential_show_otp_via_id.js
+++ b/js/credential_show_otp_via_id.js
@@ -1,6 +1,6 @@
 function showOTPViaCredentialID(credential_id) {
     // Send a GET request to ajax.php as ajax.php?get_totp_token_via_id=true&credential_id=ID
-    jQuery.get(
+    itflowGet(
         "../ajax.php", {
             get_totp_token_via_id: 'true',
             credential_id: credential_id
diff --git a/js/http.js b/js/http.js
new file mode 100644
index 000000000..a0dcfee4c
--- /dev/null
+++ b/js/http.js
@@ -0,0 +1,96 @@
+/**
+ * Drop-in replacements for itflowGet() and itflowPost().
+ *
+ * These keep jQuery's exact call shape - itflowGet(url, data, success, error) -
+ * so the ~28 existing call sites did not have to be restructured when jQuery
+ * was removed. Every one of them uses the plain callback form; none chained
+ * .done()/.fail() or passed a dataType, so nothing else is reproduced here.
+ *
+ * The success callback receives the raw response TEXT, matching jQuery's
+ * behaviour when the server does not send a JSON content type. Several call
+ * sites do their own JSON.parse(), so returning a parsed object here would
+ * break them.
+ */
+
+/** Serialise to PHP-style bracket params, the way jQuery did. */
+function itflowSerialize(data) {
+    const params = new URLSearchParams();
+
+    (function add(prefix, value) {
+        if (Array.isArray(value)) {
+            value.forEach(function (v, i) {
+                add(prefix + '[' + i + ']', v);
+            });
+        } else if (value !== null && typeof value === 'object') {
+            Object.keys(value).forEach(function (k) {
+                add(prefix ? prefix + '[' + k + ']' : k, value[k]);
+            });
+        } else {
+            params.append(prefix, value === true ? 'true' : String(value));
+        }
+    })('', data || {});
+
+    return params.toString();
+}
+
+function itflowGet(url, data, success, error) {
+    const query = itflowSerialize(data);
+    const sep = url.indexOf('?') === -1 ? '?' : '&';
+
+    return fetch(query ? url + sep + query : url, {
+        method: 'GET',
+        credentials: 'same-origin'
+    })
+        .then(function (res) {
+            if (!res.ok) {
+                throw new Error('HTTP ' + res.status);
+            }
+            return res.text();
+        })
+        .then(function (text) {
+            if (typeof success === 'function') {
+                success(text);
+            }
+            return text;
+        })
+        .catch(function (err) {
+            if (typeof error === 'function') {
+                error(err);
+            } else {
+                console.error('itflowGet ' + url + ':', err);
+            }
+        });
+}
+
+function itflowPost(url, data, success, error) {
+    return fetch(url, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        credentials: 'same-origin',
+        body: itflowSerialize(data)
+    })
+        .then(function (res) {
+            if (!res.ok) {
+                throw new Error('HTTP ' + res.status);
+            }
+            return res.text();
+        })
+        .then(function (text) {
+            if (typeof success === 'function') {
+                success(text);
+            }
+            return text;
+        })
+        .catch(function (err) {
+            if (typeof error === 'function') {
+                error(err);
+            } else {
+                console.error('itflowPost ' + url + ':', err);
+            }
+        });
+}
+
+/** Kept for the kanban and invoice item-order callers, which use this name. */
+function itflowPostForm(url, data) {
+    return itflowPost(url, data);
+}
diff --git a/js/keepalive.js b/js/keepalive.js
index 493dfc3e3..721a9c654 100644
--- a/js/keepalive.js
+++ b/js/keepalive.js
@@ -4,7 +4,7 @@
 function keep_alive() {
 
     //Send a GET request to keepalive.php as keepalive.php?keepalive
-    jQuery.get(
+    itflowGet(
         "/keepalive.php",
         {keepalive: 'true'},
         function(data) {
diff --git a/setup/index.php b/setup/index.php
index fddc6a9a9..80319e4b6 100644
--- a/setup/index.php
+++ b/setup/index.php
@@ -574,9 +574,11 @@ if (isset($_POST['add_telemetry'])) {
     <aside class="app-sidebar shadow" data-bs-theme="dark">
 
         <!-- Brand Logo -->
-        <a href="https://itflow.org" class="brand-link">
-            <h3 class="brand-text fw-light"><i class="fas fa-paper-plane text-primary me-2"></i><span class="text-primary text-bold">IT</span>Flow</h3>
-        </a>
+        <div class="sidebar-brand">
+            <a href="https://itflow.org" class="brand-link">
+                <h3 class="brand-text fw-light"><i class="fas fa-paper-plane text-primary me-2"></i><span class="text-primary text-bold">IT</span>Flow</h3>
+            </a>
+        </div>
 
         <!-- Sidebar -->
         <div class="sidebar">