diff --git a/app/Views/stock/dieselStockDetails.php b/app/Views/stock/dieselStockDetails.php
index d9754477..f5b2da8f 100644
--- a/app/Views/stock/dieselStockDetails.php
+++ b/app/Views/stock/dieselStockDetails.php
@@ -1,4 +1,7 @@
 <style type="text/css">
+
+
+
     .num {
         text-align: right;
     }
@@ -421,7 +424,7 @@ foreach ($period as $day) {
                                                 ------------------------------------------------------------>
 
                                     <div>
-                                        <div class="modal fade" id="customizeModalId" tabindex="-1" role="dialog" aria-labelledby="customizeModalLabel" aria-hidden="true">
+                                        <div class="modal fade  " id="customizeModalId" tabindex="-1" role="dialog" aria-labelledby="customizeModalLabel" aria-hidden="true">
                                             <div class="modal-dialog modal-md">
                                                 <div class="modal-content">
                                                     <div class="modal-header">
@@ -1988,6 +1991,29 @@ foreach ($period as $day) {
 </script>
 
 
+<script>
+    $(document).ready(function() {
+        function moveModalBackdropToFullscreen() {
+            setTimeout(() => {
+                $('.modal-backdrop').appendTo('#fullscreenDiv'); // Move backdrop inside fullscreen
+            }, 10); // Small delay ensures backdrop is created first
+        }
+
+        // Move the modal backdrop when a modal opens
+        $('#bs-example-modal-lg, #customizeModalId').on('show.bs.modal', function() {
+            moveModalBackdropToFullscreen();
+        });
+
+        // Ensure modals work properly in fullscreen mode
+        document.addEventListener("fullscreenchange", function() {
+            setTimeout(() => {
+                $('.modal-backdrop').remove(); // Remove any existing backdrops
+                moveModalBackdropToFullscreen();
+            }, 200);
+        });
+    });
+</script>
+
 
 <script>
     $(document).ready(function() {
@@ -2011,37 +2037,6 @@ foreach ($period as $day) {
     });
 </script>
 
-<script>
-    //getting modal backdrop inside full screen
-    $(document).ready(function() {
-    $('#fullscreenBtn').click(function() {
-        // Show fullscreen container
-        $('#fullscreenDiv').show();
-
-        // Request fullscreen
-        if (document.fullscreenElement == null) {
-            document.getElementById('fullscreenDiv').requestFullscreen();
-        }
-
-        // Add custom backdrop
-        $('#fullscreenDiv').prepend('<div class="custom-backdrop"></div>');
-
-        // Move modal into fullscreen div and show it manually
-        $('#fullscreenDiv').append($('#customizeModalId'));
-        $('#customizeModalId').modal('show');
-    });
-
-    // On modal close, clean up
-    $('#customizeModalId').on('hidden.bs.modal', function () {
-        $('.custom-backdrop').remove();
-        $('#fullscreenDiv').hide();
-        if (document.fullscreenElement) {
-            document.exitFullscreen();
-        }
-    });
-});
-
-</script>
 
 
 <script>