diff --git a/src/main/java/com/gcc/commissionerreview/controller/FoodDistrubutionReportApiController.java b/src/main/java/com/gcc/commissionerreview/controller/FoodDistrubutionReportApiController.java
index 0850325..8b21dba 100644
--- a/src/main/java/com/gcc/commissionerreview/controller/FoodDistrubutionReportApiController.java
+++ b/src/main/java/com/gcc/commissionerreview/controller/FoodDistrubutionReportApiController.java
@@ -53,12 +53,13 @@ public class FoodDistrubutionReportApiController {
     public ResponseEntity<Map<String, Object>> getComplianceDetailedReport(
             @RequestParam(value = "date", required = false) String date,
             @RequestParam("hubId") Integer hubId,
+            @RequestParam(value = "shiftId", required = false) Integer shiftId,
             @RequestParam("qid") Integer qid,
             @RequestParam("statusFilter") String statusFilter) {
         Map<String, Object> response = new HashMap<>();
         try {
             List<Map<String, Object>> detailedData = fooddistributionservice.getComplianceDetailedReport(date, hubId,
-                    qid, statusFilter);
+                    shiftId, qid, statusFilter);
             response.put("status", "success");
             response.put("data", detailedData);
         } catch (Exception e) {
diff --git a/src/main/java/com/gcc/commissionerreview/service/Fooddistributionservice.java b/src/main/java/com/gcc/commissionerreview/service/Fooddistributionservice.java
index fdc4ece..6bb3aee 100644
--- a/src/main/java/com/gcc/commissionerreview/service/Fooddistributionservice.java
+++ b/src/main/java/com/gcc/commissionerreview/service/Fooddistributionservice.java
@@ -27,10 +27,10 @@ public class Fooddistributionservice {
 
     public List<Map<String, Object>> getQuestions() {
         String sql = "SELECT qcm.qcm_id, qcm.audit_category, pqm.qid, pqm.q_english " +
-                     "FROM pmc_questions_master pqm " +
-                     "JOIN questions_category_master qcm ON pqm.qcm_id = qcm.qcm_id " +
-                     "WHERE pqm.isactive = 1 AND pqm.isdelete = 0 AND qcm.isactive = 1 AND qcm.isdelete = 0 " +
-                     "ORDER BY qcm.orderby, pqm.orderby";
+                "FROM pmc_questions_master pqm " +
+                "JOIN questions_category_master qcm ON pqm.qcm_id = qcm.qcm_id " +
+                "WHERE pqm.isactive = 1 AND pqm.isdelete = 0 AND qcm.isactive = 1 AND qcm.isdelete = 0 " +
+                "ORDER BY qcm.orderby, pqm.orderby";
         return jdbcTemplate.queryForList(sql);
     }
 
@@ -39,22 +39,28 @@ public class Fooddistributionservice {
         if (date != null && !date.trim().isEmpty()) {
             dateFilter = " AND DATE(pa.audit_date) = ? ";
         }
-        
+
         String sql = "SELECT " +
-                     "hm.id AS hub_id, hm.zone, hm.ward, hm.permanent_location, hm.si_name, " +
-                     "qcm.qcm_id, qcm.audit_category, " +
-                     "pqm.qid, pqm.q_english, " +
-                     "pam.english_name AS answer_status, " +
-                     "COUNT(pf.id) AS issue_count " +
-                     "FROM hub_master hm " +
-                     "LEFT JOIN pmc_audit pa ON pa.hub_id = hm.id AND pa.isactive = 1 AND pa.isdelete = 0 " + dateFilter +
-                     "LEFT JOIN pmc_feedback pf ON pf.pmc_audit_id = pa.id AND pf.isactive = 1 AND pf.isdelete = 0 " +
-                     "LEFT JOIN pmc_questions_master pqm ON pqm.qid = pf.questions AND pqm.isactive = 1 AND pqm.isdelete = 0 " +
-                     "LEFT JOIN questions_category_master qcm ON qcm.qcm_id = pqm.qcm_id AND qcm.isactive = 1 AND qcm.isdelete = 0 " +
-                     "LEFT JOIN pmc_answer_master pam ON pam.aid = pf.answer AND pam.isactive = 1 AND pam.isdelete = 0 " +
-                     "WHERE hm.is_active = 1 AND hm.is_delete = 0 " +
-                     "GROUP BY hm.id, hm.zone, hm.ward, hm.permanent_location, hm.si_name, qcm.qcm_id, qcm.audit_category, pqm.qid, pqm.q_english, pam.english_name " +
-                     "ORDER BY hm.id, qcm.orderby, pqm.orderby";
+                "hm.id AS hub_id, hm.zone, hm.ward, hm.permanent_location, hm.si_name, " +
+                "sm.shiftid, sm.name AS shift_name, " +
+                "qcm.qcm_id, qcm.audit_category, " +
+                "pqm.qid, pqm.q_english, " +
+                "pam.english_name AS answer_status, " +
+                "COUNT(pf.id) AS issue_count " +
+                "FROM hub_master hm " +
+                "CROSS JOIN shift_master sm " +
+                "LEFT JOIN pmc_audit pa ON pa.hub_id = hm.id AND pa.shiftid = sm.shiftid AND pa.isactive = 1 AND pa.isdelete = 0 "
+                + dateFilter +
+                "LEFT JOIN pmc_feedback pf ON pf.pmc_audit_id = pa.id AND pf.isactive = 1 AND pf.isdelete = 0 " +
+                "LEFT JOIN pmc_questions_master pqm ON pqm.qid = pf.questions AND pqm.isactive = 1 AND pqm.isdelete = 0 "
+                +
+                "LEFT JOIN questions_category_master qcm ON qcm.qcm_id = pqm.qcm_id AND qcm.isactive = 1 AND qcm.isdelete = 0 "
+                +
+                "LEFT JOIN pmc_answer_master pam ON pam.aid = pf.answer AND pam.isactive = 1 AND pam.isdelete = 0 " +
+                "WHERE hm.is_active = 1 AND hm.is_delete = 0 AND sm.isactive = 1 AND sm.isdelete = 0 " +
+                "GROUP BY hm.id, hm.zone, hm.ward, hm.permanent_location, hm.si_name, sm.shiftid, sm.name, qcm.qcm_id, qcm.audit_category, pqm.qid, pqm.q_english, pam.english_name "
+                +
+                "ORDER BY hm.id, sm.orderby, qcm.orderby, pqm.orderby";
 
         if (date != null && !date.trim().isEmpty()) {
             return jdbcTemplate.queryForList(sql, date);
@@ -63,45 +69,59 @@ public class Fooddistributionservice {
         }
     }
 
-    public List<Map<String, Object>> getComplianceDetailedReport(String date, Integer hubId, Integer qid, String status) {
+    public List<Map<String, Object>> getComplianceDetailedReport(String date, Integer hubId, Integer shiftId,
+            Integer qid, String status) {
         String dateFilter = "";
         if (date != null && !date.trim().isEmpty()) {
             dateFilter = " AND DATE(pa.audit_date) = ? ";
         }
-        
+        String shiftFilter = "";
+        if (shiftId != null && shiftId > 0) {
+            shiftFilter = " AND pa.shiftid = ? ";
+        }
+
         String sql = "SELECT " +
-             "pf.id, " +
-             "DATE_FORMAT(pa.audit_date, '%d/%m/%y %H:%i') AS auditDate, " +
-             "pa.shiftid, " + // Assuming shiftid is used; update if shift_master exists
-             "hm.zone, " +
-             "hm.ward, " +
-             "pa.address, " +
-             "qcm.audit_category, " +
-             "pqm.q_english, " +
-             "pam.english_name, " +
-             "hm.si_name AS name, " +
-             "dl.name AS raisedBy, " +
-             "pf.remarks AS pmcRemarks, " +
-             "CONCAT('" + fileBaseUrl + "/gccofficialapp/files', pf.image) AS videoLink, " +
-             "pf.food_swing_sts AS fsStatus, " +
-             "dl2.name AS fsChallengedBy, " +
-             "pf.fs_remarks AS fsRemarks, " +
-             "CONCAT('" + fileBaseUrl + "/gccofficialapp/files', pf.fs_image) AS fsVideoLink " +
-             "FROM pmc_feedback pf " +
-             "JOIN pmc_audit pa ON pa.id = pf.pmc_audit_id AND pa.isactive = 1 AND pa.isdelete = 0 " + dateFilter +
-             "JOIN hub_master hm ON hm.id = pa.hub_id AND hm.id = ? " +
-             "JOIN pmc_questions_master pqm ON pqm.qid = pf.questions AND pqm.qid = ? " +
-             "JOIN questions_category_master qcm ON qcm.qcm_id = pf.qcmid " +
-             "JOIN pmc_answer_master pam ON pam.aid = pf.answer AND pam.english_name = ? " +
-             "LEFT JOIN driver_login dl ON pa.cby = dl.loginid " +
-             "LEFT JOIN driver_login dl2 ON pf.fs_cby = dl2.loginid " +
-             "WHERE pf.isactive = 1 AND pf.isdelete = 0 " +
-             "ORDER BY pf.id DESC";
+                "pf.id, " +
+                "DATE_FORMAT(pa.audit_date, '%d/%m/%y %H:%i') AS auditDate, " +
+                "sm.name AS shift, " +
+                "hm.zone, " +
+                "hm.ward, " +
+                "pa.address, " +
+                "qcm.audit_category, " +
+                "pqm.q_english, " +
+                "pam.english_name, " +
+                "hm.si_name AS name, " +
+                "dl.name AS raisedBy, " +
+                "pf.remarks AS pmcRemarks, " +
+                "CONCAT('" + fileBaseUrl + "/gccofficialapp/files', pf.image) AS videoLink, " +
+                "pf.food_swing_sts AS fsStatus, " +
+                "dl2.name AS fsChallengedBy, " +
+                "pf.fs_remarks AS fsRemarks, " +
+                "CONCAT('" + fileBaseUrl + "/gccofficialapp/files', pf.fs_image) AS fsVideoLink " +
+                "FROM pmc_feedback pf " +
+                "JOIN pmc_audit pa ON pa.id = pf.pmc_audit_id AND pa.isactive = 1 AND pa.isdelete = 0 " + dateFilter
+                + shiftFilter +
+                "JOIN hub_master hm ON hm.id = pa.hub_id AND hm.id = ? " +
+                "LEFT JOIN shift_master sm ON sm.shiftid = pa.shiftid AND sm.isactive = 1 AND sm.isdelete = 0 " +
+                "JOIN pmc_questions_master pqm ON pqm.qid = pf.questions AND pqm.qid = ? " +
+                "JOIN questions_category_master qcm ON qcm.qcm_id = pf.qcmid " +
+                "JOIN pmc_answer_master pam ON pam.aid = pf.answer AND pam.english_name = ? " +
+                "LEFT JOIN driver_login dl ON pa.cby = dl.loginid " +
+                "LEFT JOIN driver_login dl2 ON pf.fs_cby = dl2.loginid " +
+                "WHERE pf.isactive = 1 AND pf.isdelete = 0 " +
+                "ORDER BY pf.id DESC";
 
+        java.util.List<Object> params = new java.util.ArrayList<>();
         if (date != null && !date.trim().isEmpty()) {
-            return jdbcTemplate.queryForList(sql, date, hubId, qid, status);
-        } else {
-            return jdbcTemplate.queryForList(sql, hubId, qid, status);
+            params.add(date);
+        }
+        if (shiftId != null && shiftId > 0) {
+            params.add(shiftId);
         }
+        params.add(hubId);
+        params.add(qid);
+        params.add(status);
+
+        return jdbcTemplate.queryForList(sql, params.toArray());
     }
 }
diff --git a/src/main/resources/templates/modules/fooddistribution/fooddistributionreport.html b/src/main/resources/templates/modules/fooddistribution/fooddistributionreport.html
index 527bc08..1c144ef 100644
--- a/src/main/resources/templates/modules/fooddistribution/fooddistributionreport.html
+++ b/src/main/resources/templates/modules/fooddistribution/fooddistributionreport.html
@@ -11,6 +11,7 @@
     <!-- DataTables CSS -->
     <link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet" />
     <link href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css" rel="stylesheet" />
+    <link href="https://cdn.datatables.net/fixedcolumns/4.2.2/css/fixedColumns.dataTables.min.css" rel="stylesheet" />
 
     <style>
         body {
@@ -62,7 +63,7 @@
             color: #0043a8;
         }
 
-        .table-responsive {
+        .report-container {
             background: #fff;
             padding: 15px;
             border-radius: 8px;
@@ -70,20 +71,73 @@
         }
 
         /* Custom Scrollbar for modern UX */
+        /* .dataTables_scrollBody {
+            overflow-x: scroll !important;
+           
+            overflow-y: auto !important;
+            white-space: nowrap;
+            cursor: grab;
+        } */
+
+        .dataTables_scrollBody {
+            overflow-x: auto !important;
+            overflow-y: auto !important;
+            white-space: nowrap;
+            touch-action: pan-x pan-y;
+            /* VERY IMPORTANT */
+            cursor: grab;
+        }
+
+        .dataTables_scrollBody:active {
+            cursor: grabbing;
+        }
+
+        /* Smooth scroll for touchpad */
+        .dataTables_wrapper {
+            overflow-x: auto !important;
+        }
+
+        /* IMPORTANT */
+        .report-container table.dataTable {
+            /* width: max-content !important; */
+            width: 100% !important;
+            /* ✅ instead of max-content */
+
+            /* force table to expand */
+        }
+
+        /* Sticky columns background fix */
+        .report-container table.dataTable tbody tr td.dtfc-fixed-left {
+            background-color: #fff !important;
+            z-index: 1;
+        }
+
+        .report-container table.dataTable.table-striped tbody tr:nth-of-type(odd) td.dtfc-fixed-left {
+            background-color: #f2f2f2 !important;
+        }
+
+        .report-container table.dataTable tbody tr.grand-total-row td.dtfc-fixed-left {
+            background-color: #003366 !important;
+            color: #fff !important;
+        }
+
         .dataTables_scrollBody::-webkit-scrollbar {
             height: 8px;
             width: 8px;
         }
+
         .dataTables_scrollBody::-webkit-scrollbar-track {
-            background: #f1f1f1; 
+            background: #f1f1f1;
             border-radius: 4px;
         }
+
         .dataTables_scrollBody::-webkit-scrollbar-thumb {
-            background: #c1c1c1; 
+            background: #c1c1c1;
             border-radius: 4px;
         }
+
         .dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
-            background: #a8a8a8; 
+            background: #a8a8a8;
         }
 
         /* Modal tweaks */
@@ -101,6 +155,40 @@
         #detailModal .btn-close {
             filter: invert(1);
         }
+
+        #modalDataTable th {
+            white-space: normal !important;
+            /* allow wrapping */
+            word-break: break-word;
+            text-align: center !important;
+            vertical-align: middle !important;
+            max-width: 120px;
+            /* adjust width */
+        }
+
+        /* #modalDataTable td {
+            white-space: normal !important;
+            word-break: break-word;
+            text-align: center;
+            vertical-align: middle;
+            max-width: 150px;
+           
+        } */
+
+        #modalDataTable th,
+        #modalDataTable td {
+            white-space: normal !important;
+            word-break: break-word;
+            text-align: center;
+            vertical-align: middle;
+        }
+
+        /* Prevent modal table columns from squishing, forces horizontal scroll */
+        #detailModal .dataTables_scrollHeadInner table,
+        #detailModal .dataTables_scrollBody table {
+            min-width: 2400px !important;
+            width: 100% !important;
+        }
     </style>
 </head>
 
@@ -122,421 +210,608 @@
             </div>
         </div>
 
-        <div class="table-responsive">
-            <table id="ComplianceAbstractTable" class="table table-striped table-bordered display nowrap w-100">
-                <thead>
-                    <tr id="header-row-1">
-                        <th rowspan="3" style="vertical-align: middle;">Zone</th>
-                        <th rowspan="3"
-                            style="vertical-align: middle; white-space: normal; min-width: 250px; max-width: 350px;">
-                            Kitchen Name / Address</th>
-                        <!-- Category Headers will be appended here via JS -->
-                    </tr>
-                    <tr id="header-row-2">
-                        <!-- Questions sub-headers will be appended here via JS -->
-                    </tr>
-                    <tr id="header-row-3" class="sub-header">
-                        <!-- Issue/No Issue sub-headers will be appended here via JS -->
-                    </tr>
-                </thead>
-                <tbody>
-                    <!-- Populated via JS -->
-                </tbody>
-            </table>
+        <div class="report-container">
+            <div style="overflow-x:auto;">
+                <table id="ComplianceAbstractTable" class="table table-striped table-bordered display nowrap">
+                    <thead>
+                        <tr id="header-row-1">
+                            <th rowspan="3" style="vertical-align: middle;">Zone</th>
+                            <th rowspan="3"
+                                style="vertical-align: middle; white-space: normal; min-width: 250px; max-width: 350px;">
+                                Kitchen Name / Address</th>
+                            <th rowspan="3" style="vertical-align: middle;">Shift</th>
+                            <!-- Category Headers will be appended here via JS -->
+                        </tr>
+                        <tr id="header-row-2">
+                            <!-- Questions sub-headers will be appended here via JS -->
+                        </tr>
+                        <tr id="header-row-3" class="sub-header">
+                            <!-- Issue/No Issue sub-headers will be appended here via JS -->
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <!-- Populated via JS -->
+                    </tbody>
+                </table>
+            </div>
         </div>
-    </div>
-
-    <!-- Details Modal -->
-    <div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true"
-        data-bs-backdrop="static">
-        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="detailModalLabel">Compliance Details</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body table-responsive">
-                    <table id="modalDataTable" class="table table-bordered table-striped w-100">
-                        <thead class="table-dark">
-                            <tr>
-                                <th class="text-center">ID</th>
-                                <th class="text-center">Audit Date</th>
-                                <th class="text-center">Shift</th>
-                                <th class="text-center">Zone</th>
-                                <th class="text-center">Ward</th>
-                                <th class="text-center">Address</th>
-                                <th class="text-center">Audit Category</th>
-                                <th class="text-center">Question</th>
-                                <th class="text-center">Answer</th>
-                                <th class="text-center">Kitchen SI Name</th>
-                                <th class="text-center">Raised By</th>
-                                <th class="text-center">PMC Remarks</th>
-                                <th class="text-center">PMC Image/Video Viewer</th>
-                                <th class="text-center">FS Status</th>
-                                <th class="text-center">FS Challenged By</th>
-                                <th class="text-center">FS Remarks</th>
-                                <th class="text-center">FS Image/Video Viewer</th>
-                            </tr>
-                        </thead>
-                        <tbody id="modalTableBody">
-                        </tbody>
-                    </table>
+
+        <!-- Details Modal -->
+        <div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true"
+            data-bs-backdrop="static">
+            <div class="modal-dialog modal-xl modal-dialog-centered">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="detailModalLabel">Compliance Details</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <table id="modalDataTable" class="table table-bordered table-striped">
+                            <thead class="table-dark">
+                                <tr>
+                                    <th class="text-center">ID</th>
+                                    <th class="text-center">Audit Date</th>
+                                    <th class="text-center">Shift</th>
+                                    <th class="text-center">Zone</th>
+                                    <th class="text-center">Ward</th>
+                                    <th class="text-center">Address</th>
+                                    <th class="text-center">Audit Category</th>
+                                    <th class="text-center">Question</th>
+                                    <th class="text-center">Answer</th>
+                                    <th class="text-center">Kitchen SI Name</th>
+                                    <th class="text-center">Raised By</th>
+                                    <th class="text-center">PMC Remarks</th>
+                                    <th class="text-center">PMC Image/Video Viewer</th>
+                                    <th class="text-center">FS Status</th>
+                                    <th class="text-center">FS Challenged By</th>
+                                    <th class="text-center">FS Remarks</th>
+                                    <th class="text-center">FS Image/Video Viewer</th>
+                                </tr>
+                            </thead>
+                            <tbody id="modalTableBody">
+                            </tbody>
+                        </table>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-
-    <!-- Media Modal -->
-    <div class="modal fade" id="mediaModal" tabindex="-1" aria-labelledby="mediaModalLabel" aria-hidden="true" style="z-index: 1060;">
-        <div class="modal-dialog modal-lg modal-dialog-centered">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="mediaModalLabel">Media Viewer</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body text-center" id="mediaModalBody">
+
+        <!-- Media Modal -->
+        <div class="modal fade" id="mediaModal" tabindex="-1" aria-labelledby="mediaModalLabel" aria-hidden="true"
+            style="z-index: 1060;">
+            <div class="modal-dialog modal-lg modal-dialog-centered">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="mediaModalLabel">Media Viewer</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body text-center" id="mediaModalBody">
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-
-    <!-- Scripts -->
-    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
-
-    <!-- DataTables JS -->
-    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
-    <script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
-    <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
-    <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
-
-    <!-- SweetAlert -->
-    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
-
-    <script th:inline="none">
-        var categoryMap = [];
-        var table = null;
-        var modalTable = null;
-
-        $(document).ready(function () {
-            // Init modal DT just once
-            modalTable = $('#modalDataTable').DataTable({
-                autoWidth: false,
-                responsive: false,
-                scrollX: true,
-                scrollY: "50vh",
-                scrollCollapse: true,
-                searching: true,
-                paging: true,
-                info: true,
-                ordering: false
-            });
 
-            // 1) Fetch categories first
-            $.ajax({
-                url: '/commissionerreview/api/fooddistribution/categories',
-                method: 'GET',
-                success: function (res) {
-                    if (res.status === 'success') {
-                        categoryMap = res.data;
-                        buildTableHeaders();
-                        loadAbstractReport();
-                    } else {
-                        Swal.fire('Error', 'Failed to load categories', 'error');
+        <!-- Scripts -->
+        <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+
+        <!-- DataTables JS -->
+        <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+        <script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
+        <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
+        <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
+        <script src="https://cdn.datatables.net/fixedcolumns/4.2.2/js/dataTables.fixedColumns.min.js"></script>
+
+        <!-- SweetAlert -->
+        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+        <script th:inline="none">
+            var categoryMap = [];
+            var table = null;
+            var modalTable = null;
+
+            $(document).ready(function () {
+                // Set default date to yesterday
+                var yesterday = new Date();
+                yesterday.setDate(yesterday.getDate() - 1);
+                var yyyy = yesterday.getFullYear();
+                var mm = String(yesterday.getMonth() + 1).padStart(2, '0');
+                var dd = String(yesterday.getDate()).padStart(2, '0');
+                $('#filterDate').val(yyyy + '-' + mm + '-' + dd);
+
+                // Init modal DT just once
+                modalTable = $('#modalDataTable').DataTable({
+                    autoWidth: false,
+                    columnDefs: [
+                        { width: "60px", targets: 0 },   // ID
+                        { width: "120px", targets: 1 },  // Date
+                        { width: "60px", targets: 2 },   // Shift
+                        { width: "60px", targets: 3 },   // Zone
+                        { width: "60px", targets: 4 },   // Ward
+                        { width: "200px", targets: 5 },  // Address
+                        { width: "180px", targets: 6 },  // Category
+                        { width: "180px", targets: 7 },  // Question
+                        { width: "120px", targets: 8 },  // Answer
+                        { width: "180px", targets: 9 },  // Kitchen SI
+                        { width: "150px", targets: 10 }, // Raised By
+                        { width: "220px", targets: 11 }, // PMC Remarks
+                        { width: "150px", targets: 12 },
+                        { width: "120px", targets: 13 },
+                        { width: "150px", targets: 14 },
+                        { width: "220px", targets: 15 }, // FS Remarks
+                        { width: "150px", targets: 16 }
+                    ],
+                    responsive: false,
+                    scrollX: true,
+                    scrollY: "50vh",
+                    scrollCollapse: true,
+                    searching: true,
+                    paging: true,
+                    info: true,
+                    ordering: false
+                });
+
+                // 1) Fetch categories first
+                $.ajax({
+                    url: '/commissionerreview/api/fooddistribution/categories',
+                    method: 'GET',
+                    success: function (res) {
+                        if (res.status === 'success') {
+                            categoryMap = res.data;
+                            buildTableHeaders();
+                            loadAbstractReport();
+                        } else {
+                            Swal.fire('Error', 'Failed to load categories', 'error');
+                        }
+                    },
+                    error: function () {
+                        Swal.fire('Error', 'API error loading categories', 'error');
                     }
-                },
-                error: function () {
-                    Swal.fire('Error', 'API error loading categories', 'error');
-                }
-            });
+                });
+
+                $('#btnSearch').click(function () {
+                    loadAbstractReport();
+                });
 
-            $('#btnSearch').click(function () {
-                loadAbstractReport();
+                // Delegate click for modal details
+                $('#ComplianceAbstractTable tbody').on('click', '.clickable-cell', function () {
+                    var filterDate = $('#filterDate').val() || '';
+                    var hubId = $(this).data('hubid');
+                    var shiftId = $(this).data('shiftid');
+                    var qid = $(this).data('qid');
+                    var statusFilter = $(this).data('status');
+
+                    if (!hubId || !qid || !statusFilter) return;
+
+                    // Show loading...
+                    Swal.fire({ title: 'Loading...', allowOutsideClick: false, didOpen: function () { Swal.showLoading(); } });
+
+                    $.ajax({
+                        url: '/commissionerreview/api/fooddistribution/complianceDetails',
+                        method: 'GET',
+                        data: {
+                            date: filterDate,
+                            hubId: hubId,
+                            shiftId: shiftId,
+                            qid: qid,
+                            statusFilter: statusFilter
+                        },
+                        success: function (res) {
+                            Swal.close();
+                            if (res.status === 'success') {
+                                populateModal(res.data);
+                                $('#detailModal').modal('show');
+
+                            } else {
+                                Swal.fire('Error', 'Failed to load detailed data.', 'error');
+                            }
+                        },
+                        error: function () {
+                            Swal.fire('Error', 'API error loading detailed data.', 'error');
+                        }
+                    });
+                });
+                $('#detailModal').on('shown.bs.modal', function () {
+                    if (modalTable !== null) {
+                        modalTable.columns.adjust().draw();
+                    }
+                });
             });
 
-            // Delegate click for modal details
-            $('#ComplianceAbstractTable tbody').on('click', '.clickable-cell', function () {
-                var filterDate = $('#filterDate').val() || '';
-                var hubId = $(this).data('hubid');
-                var qid = $(this).data('qid');
-                var statusFilter = $(this).data('status');
+            function buildTableHeaders() {
+                var hr1 = $('#header-row-1');
+                var hr2 = $('#header-row-2');
+                var hr3 = $('#header-row-3');
 
-                if (!hubId || !qid || !statusFilter) return;
+                var groupedCategories = {};
+                categoryMap.forEach(function (q) {
+                    if (!groupedCategories[q.qcm_id]) {
+                        groupedCategories[q.qcm_id] = { name: q.audit_category, questions: [] };
+                    }
+                    groupedCategories[q.qcm_id].questions.push(q);
+                });
 
-                // Show loading...
-                Swal.fire({ title: 'Loading...', allowOutsideClick: false, didOpen: function () { Swal.showLoading(); } });
+                categoryMap.groupedCategories = groupedCategories;
+
+                Object.values(groupedCategories).forEach(function (cat) {
+                    hr1.append('<th colspan="' + cat.questions.length + '">' + cat.name + '</th>');
+
+                    cat.questions.forEach(function (q) {
+                        hr2.append('<th>' + q.q_english + '</th>');
+                        hr3.append('<th>Issue Found</th>');
+                    });
+                });
+
+                // Add Total column header
+                hr1.append('<th rowspan="3" style="vertical-align: middle; background-color: #003366 !important; color: white !important; min-width: 120px;">Total Issue Found</th>');
+            }
+
+            function loadAbstractReport() {
+                var filterDate = $('#filterDate').val() || '';
+
+                // Show loading
+                Swal.fire({ title: 'Fetching Data...', allowOutsideClick: false, didOpen: function () { Swal.showLoading(); } });
 
                 $.ajax({
-                    url: '/commissionerreview/api/fooddistribution/complianceDetails',
+                    url: '/commissionerreview/api/fooddistribution/complianceAbstract',
                     method: 'GET',
-                    data: {
-                        date: filterDate,
-                        hubId: hubId,
-                        qid: qid,
-                        statusFilter: statusFilter
-                    },
+                    data: { date: filterDate },
                     success: function (res) {
                         Swal.close();
                         if (res.status === 'success') {
-                            populateModal(res.data);
-                            $('#detailModal').modal('show');
+                            if (table !== null) {
+                                table.destroy();
+                                $('#ComplianceAbstractTable tbody').empty();
+                            }
+
+                            renderAbstractBody(res.data);
+
+                            table = $('#ComplianceAbstractTable').DataTable({
+                                dom: 'Bfrtip',
+                                buttons: [
+                                    'copy',
+                                    'csv',
+                                    {
+                                        text: 'Excel',
+                                        className: 'btn-excel',
+                                        action: function (e, dt, node, config) {
+                                            // Save currently selected page length
+                                            var currentLen = dt.page.len();
+                                            // Show all data to ensure we capture the whole table
+                                            dt.page.len(-1).draw(false);
+
+                                            // Get the raw DOM table element
+                                            var tableEl = document.getElementById('ComplianceAbstractTable');
+
+                                            // Use SheetJS to convert it purely visually exactly as the screen merges it
+                                            var wb = XLSX.utils.table_to_book(tableEl, { sheet: "FSSAI Report", raw: true });
+
+                                            // Trigger download
+                                            XLSX.writeFile(wb, 'Food_Distribution_Compliance.xlsx');
+
+                                            // Restore old page length
+                                            dt.page.len(currentLen).draw(false);
+                                        }
+                                    },
+                                    'print'
+                                ],
+                                lengthMenu: [[50, 100, -1], [50, 100, "All"]],
+                                paging: true,
+                                ordering: false,
+                                info: true,
+                                scrollX: true,
+                                scrollY: "60vh",
+                                scrollCollapse: true,
+                                autoWidth: false,
+                                fixedColumns: {
+                                    leftColumns: 3
+                                }
+                            });
+                            setTimeout(function () {
+                                // bindScrollBehavior();
+                                table.columns.adjust().draw();
+                            }, 300);
                         } else {
-                            Swal.fire('Error', 'Failed to load detailed data.', 'error');
+                            Swal.fire('Error', res.message || 'Failed to fetch data.', 'error');
                         }
                     },
                     error: function () {
-                        Swal.fire('Error', 'API error loading detailed data.', 'error');
+                        Swal.close();
+                        Swal.fire('Error', 'API request failed.', 'error');
                     }
                 });
-            });
-        });
-
-        function buildTableHeaders() {
-            var hr1 = $('#header-row-1');
-            var hr2 = $('#header-row-2');
-            var hr3 = $('#header-row-3');
+            }
 
-            var groupedCategories = {};
-            categoryMap.forEach(function (q) {
-                if (!groupedCategories[q.qcm_id]) {
-                    groupedCategories[q.qcm_id] = { name: q.audit_category, questions: [] };
-                }
-                groupedCategories[q.qcm_id].questions.push(q);
-            });
+            function renderAbstractBody(data) {
+                var hubGroups = {};
+                var questionTotals = {};
+                var grandTotal = 0;
+
+                data.forEach(function (row) {
+                    var kId = row.hub_id;
+                    if (!hubGroups[kId]) {
+                        hubGroups[kId] = {
+                            hub_id: row.hub_id,
+                            zone: row.zone || '',
+                            name_address: (row.si_name || row.permanent_location || ('Kitchen ' + row.hub_id)) + (row.permanent_location ? ' - ' + row.permanent_location : ''),
+                            shifts: {}
+                        };
+                    }
 
-            categoryMap.groupedCategories = groupedCategories;
+                    var shiftId = row.shiftid || '0';
+                    var shiftName = row.shift_name || '-';
 
-            Object.values(groupedCategories).forEach(function (cat) {
-                hr1.append('<th colspan="' + (cat.questions.length * 2) + '">' + cat.name + '</th>');
+                    if (!hubGroups[kId].shifts[shiftId]) {
+                        hubGroups[kId].shifts[shiftId] = {
+                            shift_id: shiftId,
+                            shift_name: shiftName,
+                            counts: {}
+                        };
+                    }
 
-                cat.questions.forEach(function (q) {
-                    hr2.append('<th colspan="2">' + q.q_english + '</th>');
-                    hr3.append('<th>Issue Found</th><th>No Issue</th>');
+                    var qId = row.qid;
+                    if (qId) {
+                        if (!hubGroups[kId].shifts[shiftId].counts[qId]) {
+                            hubGroups[kId].shifts[shiftId].counts[qId] = { 'Issue Found': 0, 'No Issue': 0 };
+                        }
+                        var s = row.answer_status;
+                        if (s === 'Issue Found' || s === 'No Issue') {
+                            hubGroups[kId].shifts[shiftId].counts[qId][s] += row.issue_count;
+                        }
+                    }
                 });
-            });
-        }
 
-        function loadAbstractReport() {
-            var filterDate = $('#filterDate').val() || '';
-
-            // Show loading
-            Swal.fire({ title: 'Fetching Data...', allowOutsideClick: false, didOpen: function () { Swal.showLoading(); } });
-
-            $.ajax({
-                url: '/commissionerreview/api/fooddistribution/complianceAbstract',
-                method: 'GET',
-                data: { date: filterDate },
-                success: function (res) {
-                    Swal.close();
-                    if (res.status === 'success') {
-                        if (table !== null) {
-                            table.destroy();
-                            $('#ComplianceAbstractTable tbody').empty();
+                var tbody = $('#ComplianceAbstractTable tbody');
+                var groupedCategories = categoryMap.groupedCategories;
+
+                Object.values(hubGroups).forEach(function (hub) {
+                    var shiftKeys = Object.keys(hub.shifts);
+                    var rowSpanCount = shiftKeys.length;
+
+                    shiftKeys.forEach(function (shiftId, index) {
+                        var shift = hub.shifts[shiftId];
+                        var tr = $('<tr></tr>');
+
+                        if (index === 0) {
+                            tr.append('<td class="text-center align-middle" rowspan="' + rowSpanCount + '">' + hub.zone + '</td>');
+                            tr.append('<td class="text-center align-middle" rowspan="' + rowSpanCount + '" style="white-space: normal; min-width: 250px; max-width: 350px;">' + hub.name_address + '</td>');
+                        } else {
+                            // Maintain perfect column counts for DataTables matrix validation to completely prevent tn/18 error!
+                            tr.append('<td style="display: none;"></td>');
+                            tr.append('<td style="display: none;"></td>');
                         }
 
-                        renderAbstractBody(res.data);
-
-                        table = $('#ComplianceAbstractTable').DataTable({
-                            dom: 'Bfrtip',
-                            buttons: [
-                                'copy',
-                                'csv',
-                                {
-                                    text: 'Excel',
-                                    className: 'btn-excel',
-                                    action: function (e, dt, node, config) {
-                                        // Save currently selected page length
-                                        var currentLen = dt.page.len();
-                                        // Show all data to ensure we capture the whole table
-                                        dt.page.len(-1).draw(false);
-                                        
-                                        // Get the raw DOM table element
-                                        var tableEl = document.getElementById('ComplianceAbstractTable');
-                                        
-                                        // Use SheetJS to convert it purely visually exactly as the screen merges it
-                                        var wb = XLSX.utils.table_to_book(tableEl, { sheet: "FSSAI Report", raw: true });
-                                        
-                                        // Trigger download
-                                        XLSX.writeFile(wb, 'Food_Distribution_Compliance.xlsx');
-                                        
-                                        // Restore old page length
-                                        dt.page.len(currentLen).draw(false);
-                                    }
-                                },
-                                'print'
-                            ],
-                            lengthMenu: [[50, 100, -1], [50, 100, "All"]],
-                            paging: true,
-                            ordering: false,
-                            info: true,
-                            scrollX: true,
-                            scrollY: "60vh",
-                            scrollCollapse: true
-                        });
-                        setTimeout(function(){
-                            enableDragScroll();
-                        }, 200);
-                    } else {
-                        Swal.fire('Error', res.message || 'Failed to fetch data.', 'error');
-                    }
-                },
-                error: function () {
-                    Swal.close();
-                    Swal.fire('Error', 'API request failed.', 'error');
-                }
-            });
-        }
+                        tr.append('<td class="text-center align-middle" style="white-space: nowrap; font-weight: bold; color: #003366;">' + shift.shift_name + '</td>');
 
-        function renderAbstractBody(data) {
-            var kitchenMap = {};
-
-            data.forEach(function (row) {
-                var kId = row.hub_id;
-                if (!kitchenMap[kId]) {
-                    kitchenMap[kId] = {
-                        hub_id: row.hub_id,
-                        zone: row.zone || '',
-                        name_address: (row.si_name || row.permanent_location || ('Kitchen ' + row.hub_id)) + (row.permanent_location ? ' - ' + row.permanent_location : ''),
-                        counts: {}
-                    };
-                }
+                        // Loop in the same order as headers
+                        var totalIssues = 0;
 
-                var qId = row.qid;
-                if (!kitchenMap[kId].counts[qId]) {
-                    kitchenMap[kId].counts[qId] = { 'Issue Found': 0, 'No Issue': 0 };
-                }
-                // Add issue / no issue count
-                var s = row.answer_status;
-                if (s === 'Issue Found' || s === 'No Issue') {
-                    kitchenMap[kId].counts[qId][s] += row.issue_count;
-                }
-            });
+                        Object.values(groupedCategories).forEach(function (cat) {
+                            cat.questions.forEach(function (q) {
+                                var counts = shift.counts[q.qid] || { 'Issue Found': 0 };
 
-            var tbody = $('#ComplianceAbstractTable tbody');
-            var groupedCategories = categoryMap.groupedCategories;
+                                var issueCount = counts['Issue Found'] || 0;
+                                totalIssues += issueCount;
+                                questionTotals[q.qid] = (questionTotals[q.qid] || 0) + issueCount;
 
-            Object.values(kitchenMap).forEach(function (kitchen) {
-                var tr = $('<tr></tr>');
-                tr.append('<td class="text-center align-middle">' + kitchen.zone + '</td>');
-                tr.append('<td class="text-center align-middle" style="white-space: normal; min-width: 250px; max-width: 350px;">' + kitchen.name_address + '</td>');
+                                var tdIssue = '<td><span class="clickable-cell" data-hubid="' + hub.hub_id + '" data-shiftid="' + shift.shift_id + '" data-qid="' + q.qid + '" data-status="Issue Found">' + (issueCount || '') + '</span></td>';
 
-                // Loop in the same order as headers
-                Object.values(groupedCategories).forEach(function (cat) {
-                    cat.questions.forEach(function (q) {
-                        var counts = kitchen.counts[q.qid] || { 'Issue Found': 0, 'No Issue': 0 };
+                                tr.append(tdIssue);
+                            });
+                        });
+
+                        tr.append('<td class="text-center align-middle" style="font-weight: bold; font-size: 1.1em; color: #dc3545;">' + (totalIssues > 0 ? totalIssues : '') + '</td>');
+                        tbody.append(tr);
 
-                        var issueCount = counts['Issue Found'];
-                        var noIssueCount = counts['No Issue'];
+                        grandTotal += totalIssues;
+                    });
+                });
 
-                        var tdIssue = '<td><span class="clickable-cell" data-hubid="' + kitchen.hub_id + '" data-qid="' + q.qid + '" data-status="Issue Found">' + (issueCount || '') + '</span></td>';
-                        var tdNoIssue = '<td><span class="clickable-cell" data-hubid="' + kitchen.hub_id + '" data-qid="' + q.qid + '" data-status="No Issue">' + (noIssueCount || '') + '</span></td>';
+                // Append Grand Total Row at bottom
+                var totalRow = $('<tr class="grand-total-row"></tr>');
+                totalRow.append('<td class="text-center align-middle" style="font-weight: bold; font-size: 1.1em; background-color: #003366; color: white;">Grand Total</td>');
+                totalRow.append('<td class="text-center align-middle" style="font-weight: bold; font-size: 1.1em; background-color: #003366; color: white;">-</td>');
+                totalRow.append('<td class="text-center align-middle" style="font-weight: bold; font-size: 1.1em; background-color: #003366; color: white;">-</td>');
 
-                        tr.append(tdIssue);
-                        tr.append(tdNoIssue);
+                Object.values(groupedCategories).forEach(function (cat) {
+                    cat.questions.forEach(function (q) {
+                        var colTotal = questionTotals[q.qid] || 0;
+                        totalRow.append('<td class="text-center align-middle" style="font-weight: bold; font-size: 1.1em; background-color: #e9ecef; color: #003366;">' + (colTotal > 0 ? colTotal : '') + '</td>');
                     });
                 });
-                tbody.append(tr);
-            });
-        }
 
-        function populateModal(data) {
-            modalTable.clear();
-            data.forEach(function (item) {
-                var ext = item.videoLink ? item.videoLink.split('.').pop().toLowerCase() : '';
-                var isVideo = ['mp4', 'mov', 'avi', 'webm', 'mkv'].includes(ext);
+                totalRow.append('<td class="text-center align-middle" style="font-weight: bold; font-size: 1.25em; color: #dc3545; background-color: #f8d7da;">' + (grandTotal > 0 ? grandTotal : '') + '</td>');
+                tbody.append(totalRow);
+            }
 
-                var imgBtn = '-';
-                if (item.videoLink && item.videoLink.indexOf('null') === -1) {
-                    imgBtn = '<button onclick="showMedia(\'' + item.videoLink + '\', ' + isVideo + ')" class="btn btn-sm btn-info text-white"><i class="fa fa-' + (isVideo ? 'video' : 'image') + '"></i> View</button>';
-                }
+            function populateModal(data) {
+                modalTable.clear();
+                data.forEach(function (item) {
+                    var ext = item.videoLink ? item.videoLink.split('.').pop().toLowerCase() : '';
+                    var isVideo = ['mp4', 'mov', 'avi', 'webm', 'mkv'].includes(ext);
+
+                    var imgBtn = '-';
+                    if (item.videoLink && item.videoLink.indexOf('null') === -1) {
+                        imgBtn = '<button onclick="showMedia(\'' + item.videoLink + '\', ' + isVideo + ')" class="btn btn-sm btn-info text-white"><i class="fa fa-' + (isVideo ? 'video' : 'image') + '"></i> View</button>';
+                    }
 
-                var fsExt = item.fsVideoLink ? item.fsVideoLink.split('.').pop().toLowerCase() : '';
-                var isFsVideo = ['mp4', 'mov', 'avi', 'webm', 'mkv'].includes(fsExt);
+                    var fsExt = item.fsVideoLink ? item.fsVideoLink.split('.').pop().toLowerCase() : '';
+                    var isFsVideo = ['mp4', 'mov', 'avi', 'webm', 'mkv'].includes(fsExt);
 
-                var fsImgBtn = '-';
-                if (item.fsVideoLink && item.fsVideoLink.indexOf('null') === -1) {
-                    fsImgBtn = '<button onclick="showMedia(\'' + item.fsVideoLink + '\', ' + isFsVideo + ')" class="btn btn-sm btn-info text-white"><i class="fa fa-' + (isFsVideo ? 'video' : 'image') + '"></i> View</button>';
+                    var fsImgBtn = '-';
+                    if (item.fsVideoLink && item.fsVideoLink.indexOf('null') === -1) {
+                        fsImgBtn = '<button onclick="showMedia(\'' + item.fsVideoLink + '\', ' + isFsVideo + ')" class="btn btn-sm btn-info text-white"><i class="fa fa-' + (isFsVideo ? 'video' : 'image') + '"></i> View</button>';
+                    }
+
+                    modalTable.row.add([
+                        item.id,
+                        item.auditDate || '-',
+                        item.shiftid || '-',
+                        item.zone || '-',
+                        item.ward || '-',
+                        item.address || '-',
+                        item.audit_category || '-',
+                        item.q_english || '-',
+                        item.english_name || '-',
+                        item.name || '-',
+                        item.raisedBy || '-',
+                        item.pmcRemarks || '-',
+                        imgBtn,
+                        item.fsStatus || '-',
+                        item.fsChallengedBy || '-',
+                        item.fsRemarks || '-',
+                        fsImgBtn
+                    ]);
+                });
+                modalTable.draw();
+                setTimeout(function () {
+                    modalTable.columns.adjust().draw();
+                }, 300);
+            }
+
+            function showMedia(url, isVideo) {
+                var mediaHtml = '';
+                if (isVideo) {
+                    mediaHtml = '<video width="100%" controls controlsList="nodownload" disablePictureInPicture><source src="' + url + '">Your browser does not support the video tag.</video>';
+                } else {
+                    mediaHtml = '<img src="' + url + '" style="max-width: 100%; height: auto; pointer-events: none; user-select: none;" oncontextmenu="return false;" />';
                 }
+                $('#mediaModalBody').html(mediaHtml);
+                $('#mediaModal').modal('show');
 
-                modalTable.row.add([
-                    item.id,
-                    item.auditDate || '-',
-                    item.shiftid || '-',
-                    item.zone || '-',
-                    item.ward || '-',
-                    item.address || '-',
-                    item.audit_category || '-',
-                    item.q_english || '-',
-                    item.english_name || '-',
-                    item.name || '-',
-                    item.raisedBy || '-',
-                    item.pmcRemarks || '-',
-                    imgBtn,
-                    item.fsStatus || '-',
-                    item.fsChallengedBy || '-',
-                    item.fsRemarks || '-',
-                    fsImgBtn
-                ]);
+                $('#mediaModal').off('hidden.bs.modal').on('hidden.bs.modal', function () {
+                    $('#mediaModalBody').empty();
+                });
+            }
+
+            // function bindScrollBehavior() {
+            //     var scrollBodies = document.querySelectorAll('.dataTables_scrollBody');
+            //     scrollBodies.forEach(function (body) {
+            //         body.removeEventListener('wheel', handleCustomWheel);
+            //         body.addEventListener('wheel', handleCustomWheel, { passive: false });
+            //     });
+            // }
+
+            // function handleCustomWheel(e) {
+            //     var deltaX = e.deltaX;
+            //     var deltaY = e.deltaY;
+            //     var el = this;
+            //     var maxScrollLeft = el.scrollWidth - el.clientWidth;
+
+            //     if (Math.abs(deltaX) > 0) {
+            //         if ((deltaX > 0 && el.scrollLeft < maxScrollLeft) || (deltaX < 0 && el.scrollLeft > 0)) {
+            //             el.scrollLeft += deltaX;
+            //             e.preventDefault();
+            //         }
+            //     } else if (Math.abs(deltaY) > 0) {
+            //         var canScrollY = el.scrollHeight > el.clientHeight + 2;
+            //         var canScrollX = el.scrollWidth > el.clientWidth;
+            //         if (!canScrollY && canScrollX) {
+            //             if ((deltaY > 0 && el.scrollLeft < maxScrollLeft) || (deltaY < 0 && el.scrollLeft > 0)) {
+            //                 el.scrollLeft += (deltaY > 0 ? 50 : -50);
+            //                 e.preventDefault();
+            //             }
+            //         }
+            //     }
+            // }
+
+            // document.addEventListener('wheel', function (e) {
+            //     const scrollBody = document.querySelector('.dataTables_scrollBody');
+            //     if (!scrollBody) return;
+
+            //     const canScrollX = scrollBody.scrollWidth > scrollBody.clientWidth;
+
+            //     // ✅ REAL horizontal gesture (touchpad left/right)
+            //     if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
+            //         scrollBody.scrollLeft += e.deltaX;
+            //         return; // don't block
+            //     }
+
+            //     // ✅ OPTIONAL: vertical → horizontal only when no vertical scroll
+            //     const canScrollY = scrollBody.scrollHeight > scrollBody.clientHeight;
+
+            //     if (!canScrollY && canScrollX) {
+            //         scrollBody.scrollLeft -= e.deltaY;
+            //         e.preventDefault();
+            //     }
+
+            // }, { passive: false });
+
+            // $(document).on('wheel', '.dataTables_scrollBody', function (e) {
+            //     const el = this;
+
+            //     const deltaX = e.originalEvent.deltaX;
+            //     const deltaY = e.originalEvent.deltaY;
+
+            //     const canScrollX = el.scrollWidth > el.clientWidth;
+
+            //     // ✅ Case 1: Real horizontal gesture
+            //     if (Math.abs(deltaX) > 0) {
+            //         el.scrollLeft += deltaX;
+            //         return;
+            //     }
+
+            //     // ✅ Case 2: Touchpad sends only vertical → convert smartly
+            //     if (canScrollX && Math.abs(deltaY) > 0) {
+            //         el.scrollLeft += deltaY;
+            //         e.preventDefault();
+            //     }
+            // });
+
+
+            let isDown = false;
+            let startX;
+            let scrollLeft;
+
+            $(document).on('mousedown', '.dataTables_scrollBody', function (e) {
+                isDown = true;
+                $(this).css('cursor', 'grabbing');
+                startX = e.pageX - this.offsetLeft;
+                scrollLeft = this.scrollLeft;
             });
-            modalTable.draw();
-            setTimeout(function () { 
-                modalTable.columns.adjust().draw(); 
-                enableDragScroll();
-            }, 200);
-        }
 
-        function showMedia(url, isVideo) {
-            var mediaHtml = '';
-            if (isVideo) {
-                mediaHtml = '<video width="100%" controls controlsList="nodownload" disablePictureInPicture><source src="' + url + '">Your browser does not support the video tag.</video>';
-            } else {
-                mediaHtml = '<img src="' + url + '" style="max-width: 100%; height: auto; pointer-events: none; user-select: none;" oncontextmenu="return false;" />';
-            }
-            $('#mediaModalBody').html(mediaHtml);
-            $('#mediaModal').modal('show');
-            
-            $('#mediaModal').off('hidden.bs.modal').on('hidden.bs.modal', function () {
-                $('#mediaModalBody').empty();
+            $(document).on('mouseleave', '.dataTables_scrollBody', function () {
+                isDown = false;
+                $(this).css('cursor', ''); // Let CSS handle it (grab)
             });
-        }
-        function enableDragScroll() {
-            $('.dataTables_scrollBody').each(function() {
-                var newSlider = this;
-                if (!$(newSlider).hasClass('drag-scroll-enabled')) {
-                    $(newSlider).addClass('drag-scroll-enabled');
-                    var isDown = false;
-                    var startX;
-                    var scrollLeft;
-
-                    $(newSlider).css('cursor', 'grab');
-
-                    $(newSlider).on('mousedown', function(e) {
-                        isDown = true;
-                        $(newSlider).css('cursor', 'grabbing');
-                        startX = e.pageX - newSlider.offsetLeft;
-                        scrollLeft = newSlider.scrollLeft;
-                    });
-                    $(newSlider).on('mouseleave', function() {
-                        isDown = false;
-                        $(newSlider).css('cursor', 'grab');
-                    });
-                    $(newSlider).on('mouseup', function() {
-                        isDown = false;
-                        $(newSlider).css('cursor', 'grab');
-                    });
-                    $(newSlider).on('mousemove', function(e) {
-                        if (!isDown) return;
-                        e.preventDefault();
-                        var x = e.pageX - newSlider.offsetLeft;
-                        var walk = (x - startX) * 1.5;
-                        newSlider.scrollLeft = scrollLeft - walk;
-                    });
+
+            $(document).on('mouseup', '.dataTables_scrollBody', function () {
+                isDown = false;
+                $(this).css('cursor', ''); // Let CSS handle it (grab)
+            });
+
+            $(document).on('mousemove', '.dataTables_scrollBody', function (e) {
+                if (!isDown) return;
+                e.preventDefault();
+                const x = e.pageX - this.offsetLeft;
+                const walk = (x - startX) * 1.5; // Scroll speed multiplier
+                this.scrollLeft = scrollLeft - walk;
+            });
+
+            // Touchpad scroll mapping support 
+            $(document).on('wheel', '.dataTables_scrollBody', function (e) {
+                const el = this;
+                const deltaX = e.originalEvent.deltaX;
+                const deltaY = e.originalEvent.deltaY;
+
+                const canScrollY = el.scrollHeight > Math.ceil(el.clientHeight) + 5;
+                const canScrollX = el.scrollWidth > Math.ceil(el.clientWidth) + 5;
+
+                // Priority 1: Native Horizontal Touchpad Swipe
+                if (Math.abs(deltaX) > Math.abs(deltaY)) {
+                    el.scrollLeft += deltaX;
+                    e.preventDefault();
+                }
+                // Priority 2: Convert Vertical swipe/wheel to Horizontal ONLY if there is no vertical scrollbar
+                else if (!canScrollY && canScrollX && Math.abs(deltaY) > 0) {
+                    el.scrollLeft += deltaY;
+                    e.preventDefault();
                 }
             });
-        }
-    </script>
+
+        </script>
 
 </body>