UI/UX Enhancement

CPRNIMS.WebApps/Views/Components/PRMgmt/PRTabbedTable/AllPR.cshtml

@@ -52,13 +52,13 @@
         <thead >
             <tr>
                 <th style="width:7%">PRNo</th>
-                <th style="width:7%">New PRNo</th>
+                <th style="width:8%">New PRNo</th>
-                <th style="width:50%">ItemName's</th>
+                <th style="width:48%">ItemName's</th>
                 <th style="width:9%">Req. Date</th>
-                <th style="width:14%">Req. By</th>
+                <th style="width:10%">Req. By</th>
                 <th style="width:8%">DateNeeded</th>
-                <th style="width:7%">ChargeTo</th>
+                <th style="width:10%">ChargeTo</th>
-                <th style="width:7%">Action</th>
+                <th style="width:8%">Action</th>
             </tr>
         </thead>
         <tbody>
@@ -76,6 +76,7 @@
             serverSide: true,
             processing: true,
             searching:  false,    
+            ordering:   false,
             ajax: {
                 url: endpoint.GetAllPR,
                 type: 'GET',

CPRNIMS.WebApps/Views/Components/PRMgmt/PRTabbedTable/ApprovedPR.cshtml

@@ -100,6 +100,7 @@
             serverSide: true,
             processing: true,
             searching:  false,
+            ordering:   false,
             ajax: {
                 url:  endpoint.GetApprovedPR,
                 type: 'GET',

CPRNIMS.WebApps/Views/Components/PRMgmt/PRTabbedTable/DeletedPR.cshtml

@@ -79,6 +79,7 @@
             serverSide: true,
             processing: true,
             searching:  false,
+            ordering:   false,
             ajax: {
                 url: endpoint.GetDeletedPR,
                 type: 'GET',

CPRNIMS.WebApps/Views/Home/_LoginBody.cshtml

@@ -1,153 +1,125 @@
 <div class="login-page-wrapper">
-    <div class="login-main-container">
-        <!-- Medical Illustration Section -->
-        <div class="login-illustration-section">
-            <!-- Pharmaceutical Manufacturing SVG -->
-            <svg class="login-medical-illustration" viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <!-- Laboratory Equipment -->
-                <rect x="50" y="200" width="300" height="80" rx="10" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.3)" stroke-width="2" />
 
-                <!-- Test Tubes -->
+    <div class="lp-orb"></div>
-                <rect x="80" y="160" width="12" height="60" rx="6" fill="#67e8f9" />
+    <div class="lp-orb"></div>
-                <rect x="100" y="155" width="12" height="65" rx="6" fill="#22d3ee" />
+    <div class="lp-orb"></div>
-                <rect x="120" y="165" width="12" height="55" rx="6" fill="#0891b2" />
+    <div class="lp-orb"></div>
 
-                <!-- Beaker -->
+    <div style="width:100%;max-width:820px;position:relative;z-index:2;">
-                <path d="M180 180 L180 220 L220 220 L220 180 L210 180 L210 170 L190 170 L190 180 Z" fill="rgba(255,255,255,0.2)" stroke="rgba(255,255,255,0.4)" stroke-width="2" />
+        <div class="lp-card">
-                <ellipse cx="200" cy="200" rx="15" ry="8" fill="#67e8f9" opacity="0.7" />
 
-                <!-- Microscope -->
+            <!-- Left -->
-                <rect x="260" y="180" width="20" height="40" rx="4" fill="rgba(255,255,255,0.3)" />
+            <div class="lp-left">
-                <circle cx="270" cy="170" r="12" fill="rgba(255,255,255,0.4)" />
+                <div class="lp-molecule">
-                <rect x="275" y="155" width="3" height="20" fill="rgba(255,255,255,0.5)" />
+                    <div class="lp-mol-ring"></div>
+                    <div class="lp-mol-center"></div>
+                    <div class="lp-mol-dot"></div>
+                    <div class="lp-mol-dot"></div>
+                    <div class="lp-mol-dot"></div>
+                    <div class="lp-mol-dot"></div>
+                </div>
 
-                <!-- Medicine Pills -->
+                <div class="lp-brand">
-                <circle cx="320" cy="170" r="8" fill="#67e8f9" />
+                    <div class="lp-brand-icon">⚗️</div>
-                <circle cx="340" cy="175" r="8" fill="#22d3ee" />
+                    <div class="lp-brand-name">Lloyd Laboratories</div>
-                <circle cx="325" cy="190" r="8" fill="#0891b2" />
+                    <div class="lp-brand-sub">Centralized Non-Inventory<br>Purchasing System</div>
+                </div>
 
-                <!-- DNA Helix -->
+                <div class="lp-stats">
-                <path d="M60 80 Q80 60, 100 80 T140 80" stroke="#67e8f9" stroke-width="4" fill="none" opacity="0.6" />
+                    <div class="lp-stat">
-                <path d="M60 100 Q80 120, 100 100 T140 100" stroke="#22d3ee" stroke-width="4" fill="none" opacity="0.6" />
+                        <div class="lp-stat-num">99%</div>
-                <circle cx="70" cy="80" r="3" fill="#67e8f9" />
+                        <div class="lp-stat-lbl">Uptime</div>
-                <circle cx="90" cy="100" r="3" fill="#22d3ee" />
+                    </div>
-                <circle cx="110" cy="80" r="3" fill="#67e8f9" />
+                    <div class="lp-stat">
-                <circle cx="130" cy="100" r="3" fill="#22d3ee" />
+                        <div class="lp-stat-num">24/7</div>
+                        <div class="lp-stat-lbl">Access</div>
+                    </div>
+                    <div class="lp-stat">
+                        <div class="lp-stat-num">SSL</div>
+                        <div class="lp-stat-lbl">Secured</div>
+                    </div>
+                </div>
 
-                <!-- Molecular Structure -->
+                <div class="lp-features">
-                <circle cx="280" cy="90" r="8" fill="#67e8f9" />
+                    <div class="lp-feat">
-                <circle cx="300" cy="70" r="6" fill="#22d3ee" />
-                <circle cx="320" cy="90" r="8" fill="#0891b2" />
-                <circle cx="300" cy="110" r="6" fill="#67e8f9" />
-                <line x1="280" y1="90" x2="300" y2="70" stroke="rgba(255,255,255,0.5)" stroke-width="2" />
-                <line x1="300" y1="70" x2="320" y2="90" stroke="rgba(255,255,255,0.5)" stroke-width="2" />
-                <line x1="320" y1="90" x2="300" y2="110" stroke="rgba(255,255,255,0.5)" stroke-width="2" />
-                <line x1="300" y1="110" x2="280" y2="90" stroke="rgba(255,255,255,0.5)" stroke-width="2" />
-
-                <!-- Factory/Manufacturing -->
-                <rect x="150" y="120" width="100" height="60" rx="5" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.3)" stroke-width="2" />
-                <rect x="170" y="100" width="15" height="40" rx="2" fill="rgba(255,255,255,0.2)" />
-                <rect x="200" y="95" width="15" height="45" rx="2" fill="rgba(255,255,255,0.2)" />
-                <rect x="230" y="105" width="15" height="35" rx="2" fill="rgba(255,255,255,0.2)" />
-
-                <!-- Smoke/Steam -->
-                <circle cx="177" cy="85" r="4" fill="rgba(255,255,255,0.3)" />
-                <circle cx="175" cy="75" r="3" fill="rgba(255,255,255,0.2)" />
-                <circle cx="207" cy="80" r="4" fill="rgba(255,255,255,0.3)" />
-                <circle cx="210" cy="70" r="3" fill="rgba(255,255,255,0.2)" />
-                <circle cx="237" cy="90" r="4" fill="rgba(255,255,255,0.3)" />
-                <circle cx="240" cy="80" r="3" fill="rgba(255,255,255,0.2)" />
-            </svg>
-
-            <!-- Features Grid -->
-            <div class="login-features-grid">
-                <div class="login-feature-item">
                         <i class="fas fa-clipboard-check"></i>
-                    <span>Streamlined Process</span>
+                        <span>Streamlined</span>
                     </div>
-                <div class="login-feature-item">
+                    <div class="lp-feat">
                         <i class="fas fa-users-cog"></i>
-                    <span>Centralized System</span>
+                        <span>Centralized</span>
                     </div>
-                <div class="login-feature-item">
+                    <div class="lp-feat">
                         <i class="fas fa-chart-line"></i>
-                    <span>Real-time Tracking</span>
+                        <span>Real-time</span>
                     </div>
-                <div class="login-feature-item">
+                    <div class="lp-feat">
-                    <i class="fas fa-shield-heart"></i>
+                        <i class="fas fa-shield-alt"></i>
-                    <span>Secure & Compliant</span>
+                        <span>Secure</span>
                     </div>
                 </div>
             </div>
 
-        <!-- Login Form Section -->
+            <!-- Right -->
-        <div class="login-form-container">
+            <div class="lp-right">
-            <div class="login-form-header">
+                <div class="lp-form-header">
-             @*    <div class="login-company-logo">
+                    <div class="lp-form-title">Welcome Back</div>
-                    <img src="~/Content/Common/LLILogoEdited.png" alt="Lloyd Laboratories Logo" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                    <div class="lp-form-subtitle">Sign in to continue to your dashboard</div>
-                    <i class="fas fa-flask" style="display: none;"></i>
-                </div> *@
-                <div class="login-company-logo">
-                    <i class="fas fa-flask"></i>
-                </div>
-                <div class="login-company-name">Lloyd Laboratories</div>
-                <div class="login-system-subtitle">Centralized Non-Inventory Purchasing System</div>
                 </div>
 
-            <div class="login-form-body">
+                <div class="lp-form-body">
-                <form id="loginForm">
+                    <div class="lp-field">
-                    <div class="login-form-group">
+                        <label>Username</label>
-                        <label for="UserNameLogin" class="login-form-label">Username</label>
+                        <div class="lp-input-wrap">
-                        <div class="login-input-wrapper">
+                            <input type="text" id="UserNameLogin" class="lp-inp" placeholder="Enter your username">
-                            <i class="fas fa-user login-input-icon"></i>
+                            <i class="fas fa-user"></i>
-                            <input type="text" id="UserNameLogin" class="login-form-control" placeholder="Enter your username" required>
                         </div>
                     </div>
-
+                    <div class="lp-field">
-                    <div class="login-form-group">
+                        <label>Password</label>
-                        <label for="PasswordLogin" class="login-form-label">Password</label>
+                        <div class="lp-input-wrap">
-                        <div class="login-input-wrapper">
+                            <i class="fas fa-lock lp-left-icon"></i>
-                            <i class="fas fa-lock login-input-icon"></i>
+                            <input type="password"
-                            <input type="password" id="PasswordLogin" class="login-form-control" placeholder="Enter your password" required>
+                                   id="PasswordLogin"
-                            <i class="fas fa-eye login-toggle-password" id="togglePassword"></i>
+                                   class="lp-inp"
+                                   placeholder="Enter your password"
+                                   style="padding-left:42px; padding-right:48px; position:relative; z-index:1; width:100%;">
+                            <i class="fas fa-eye lp-toggle-pw"
+                               id="togglePassword"
+                               onclick="togglePasswordVisibility()"
+                               style="position:absolute; right:14px; top:50%; transform:translateY(-50%);
+                  width:20px; height:20px; display:flex; align-items:center;
+                  justify-content:center; cursor:pointer; z-index:3;
+                  pointer-events:all; color:#9ca3af; font-size:14px;"></i>
                         </div>
                     </div>
-
+                    <div class="lp-field">
-                    <div class="login-form-group">
+                        <label>Security Verification</label>
-                        <label for="captchaCode" class="login-form-label">Security Verification</label>
+                        <div class="lp-captcha-row">
-                        <div class="login-captcha-section">
+                            <div class="lp-captcha-box">
-                            <div class="login-captcha-image">
                                 <img id="captchaImage" src="/Home/GetCaptcha" alt="CAPTCHA" style="max-width: 100%; height: 40px;" />
                             </div>
-                            <button type="button" class="login-refresh-btn" onclick="refreshCaptcha()" id="refresh">
+                            <button type="button" class="lp-refresh-btn" onclick="refreshCaptcha()"><i class="fas fa-sync-alt"></i></button>
-                                <i class="fas fa-sync-alt"></i>
+                        </div>
+                        <div class="lp-input-wrap">
+                            <input type="text" id="captchaCode" name="captchaCode" class="lp-inp" placeholder="Enter CAPTCHA code">
+                            <i class="fas fa-shield-alt"></i>
+                        </div>
+                    </div>
+
+                    <div class="lp-forgot"> <a href="#" data-bs-toggle="modal" data-bs-target="#sendOTPModal">Forgot password?</a></div>
+
+                    <button id="BtnLogin" onclick="login()" class="lp-btn">
+                        <i class="fas fa-sign-in-alt" id="btnIcon" style="margin-right:8px;"></i>
+                        <span id="btnText">Sign In</span>
                     </button>
                 </div>
-                        <div class="login-input-wrapper">
-                            <i class="fas fa-shield-alt login-input-icon"></i>
-                            <input type="text" id="captchaCode" name="captchaCode" class="login-form-control" placeholder="Enter CAPTCHA code" required>
             </div>
         </div>
 
-                    <div class="login-forgot-password">
+        <div class="lp-footer">© 2025 Lloyd Laboratories Inc. — Non-Inventory Purchasing System</div>
-                        <a href="#" data-bs-toggle="modal" data-bs-target="#sendOTPModal">Forgot password?</a>
-                    </div>
-
-                    <button type="button" class="login-btn-primary" id="BtnLogin" onclick="login()">
-                        <i class="fas fa-sign-in-alt me-2"></i>
-                        Sign In
-                    </button>
-                </form>
     </div>
 </div>
-    </div>
-
-    <!-- Footer positioned at bottom -->
-    <div class="login-page-footer">
-        &copy; 2025 - Lloyd Laboratories Inc. Purchasing(Non-Inventory) - <a href="#">Privacy</a>
-    </div>
-</div>
-
 <!-- Send OTP Modal -->
 <div class="modal fade" id="sendOTPModal" tabindex="-1" aria-labelledby="sendOTPModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">

CPRNIMS.WebApps/Views/Home/_LoginLayout.cshtml

@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
     <link href="~/css/spinner.css" rel="stylesheet" />
     <link href="~/css/toast-notifications.css" rel="stylesheet" />
-    <link href="~/css/LoginModern.css" rel="stylesheet" />
+    <link href="~/css/loginpageinteractive.css" rel="stylesheet" />
 </head>
 <body>
     <div class="container">
@@ -17,7 +17,7 @@
             <div class="toast-container" id="toast-container"></div>
         </main>
     </div>
-    <script src="~/JsFunctions/Account/loginV4.js"></script>
+    <script src="~/JsFunctions/Account/loginV5.js"></script>
     <script src="~/jsfunctions/utilities/utilsV3.js"></script>
     <script src="~/js/toast-notifications.js"></script>
     <script src="~/jsfunctions/account/accountvar.js"></script>

CPRNIMS.WebApps/Views/ItemMgmt/Index.cshtml

@@ -258,7 +258,7 @@
                 </div>
             </div>
         </div>
-        <script src="~/JsFunctions/Items/ItemManagementV8.js"></script>
+        <script src="~/JsFunctions/Items/ItemManagementV9.js"></script>
         @await Html.PartialAsync("PagesView/Item/_Scripts")
     </div>
 

CPRNIMS.WebApps/Views/POMgmt/CustomPO.cshtml

@@ -79,10 +79,10 @@
                 </tbody>
             </table>
                 <div class="modal-footer">
-
                     <button type="button" id="clearCustomPage"
-                            onclick="clearCustomPage()" class="btn btn-outline-secondary px-4" style="margin-bottom:20px; margin-right:10px;"
+                            onclick="clearCustomTable()"
-                            data-bs-dismiss="modal">
+                            class="btn btn-outline-secondary px-4"
+                            style="margin-bottom:20px; margin-right:10px;">
                         <i class="bi bi-x-circle me-2"></i>Cancel
                     </button>
 
@@ -167,7 +167,7 @@
     </div>
     <input hidden id="poTypeId"/>
     <link href="~/css/po/CustomPOV2.css" rel="stylesheet" />
-    <script src="~/JsFunctions/PO/CustomPOV7.js"></script>
+    <script src="~/JsFunctions/PO/CustomPOV8.js"></script>
     @await Html.PartialAsync("PagesView/PR/_PRWOCanvass")
     @await Html.PartialAsync("PagesView/PO/_POScripts")
 </body>

CPRNIMS.WebApps/Views/PRMgmt/Index.cshtml

@@ -138,9 +138,9 @@
     </div>
     <link href="~/css/pr/TrackingV3.css" rel="stylesheet" />
     <link href="~/css/pr/ButtonStyleV2.css" rel="stylesheet" />
-    <link href="~/css/pr/PRTabs.css" rel="stylesheet" />
+    <link href="~/css/pr/PRTabsV2.css" rel="stylesheet" />
     @await Html.PartialAsync("PagesView/PR/_PRTracking")
-    <script src="~/JsFunctions/PR/PR.js"></script>
+    <script src="~/JsFunctions/PR/PRV2.js"></script>
-    <script src="~/JsFunctions/PR/PRTabs.js"></script>
+    <script src="~/jsfunctions/pr/prtabs.js"></script>
     @await Html.PartialAsync("PagesView/PR/_PRScripts")
 </body>

CPRNIMS.WebApps/Views/PRMgmt/PRTracking.cshtml

@@ -115,6 +115,6 @@
         </div>
     </div>
     <link href="~/css/pr/trackingdetail.css" rel="stylesheet" />
-    <script src="~/jsfunctions/pr/DetailedPRTrackingV8.js"></script>
+    <script src="~/jsfunctions/pr/DetailedPRTrackingV9.js"></script>
     @await Html.PartialAsync("PagesView/PR/_PRScripts")
 </body>

CPRNIMS.WebApps/Views/Shared/PartialView/_Head.cshtml

@@ -2,8 +2,8 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>@ViewData["Title"] - LLI Purchasing Non-Inventory System</title>
 <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
-<link rel="stylesheet" href="~/css/sideBarStyle.css" />
+<link rel="stylesheet" href="~/css/sideBarStyleV2.css" />
-<link rel="stylesheet" href="~/css/siteV5.css" asp-append-version="true" />
+<link rel="stylesheet" href="~/css/siteV6.css" asp-append-version="true" />
 <link rel="stylesheet" href="~/css/spinner.css" />
 <link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />
 <link href="~/lib/font-awesome/css/all.min.css" rel="stylesheet" />

CPRNIMS.WebApps/wwwroot/JsFunctions/Account/loginV5.js

@@ -143,21 +143,36 @@ function refreshCaptcha() {
     captchaImage.src = `/Home/GetCaptcha?ts=${new Date().getTime()}`; // Cache-busting query
 }
 
-document.getElementById('togglePassword').addEventListener('click', function () {
+// Password visibility toggle
-    const passwordInput = document.getElementById('PasswordLogin');
+function togglePasswordVisibility() {
-    const icon = this;
+    const input = document.getElementById('PasswordLogin');
-
+    const icon = document.getElementById('togglePassword');
-    if (passwordInput.type === 'password') {
+    const isHidden = input.type === 'password';
-        passwordInput.type = 'text';
+    input.type = isHidden ? 'text' : 'password';
-        icon.classList.remove('fa-eye');
+    icon.classList.toggle('fa-eye', !isHidden);
-        icon.classList.add('fa-eye-slash');
+    icon.classList.toggle('fa-eye-slash', isHidden);
-    } else {
+    icon.style.color = isHidden ? '#00897b' : '#9ca3af';
-        passwordInput.type = 'password';
-        icon.classList.remove('fa-eye-slash');
-        icon.classList.add('fa-eye');
 }
-});
 
+// Call this at the START of your login() function
+function setLoginLoading(loading) {
+    const btn = document.getElementById('BtnLogin');
+    const icon = document.getElementById('btnIcon');
+    const text = document.getElementById('btnText');
+
+    if (loading) {
+        btn.disabled = true;
+        icon.className = '';          // remove fa classes
+        icon.innerHTML = '<span class="lp-spinner"></span>';
+        text.textContent = 'Signing in...';
+    } else {
+        btn.disabled = false;
+        icon.innerHTML = '';
+        icon.className = 'fas fa-sign-in-alt';
+        icon.style.marginRight = '8px';
+        text.textContent = 'Sign In';
+    }
+}
 function validateCaptCha(captchaCode) {
     return new Promise((resolve, reject) => {
         var loader = $('#overlay, #loader');
@@ -177,6 +192,7 @@ function validateCaptCha(captchaCode) {
                 } else {
                     showToast('error', 'Invalid CAPTCHA. Please try again!','Login failed!',4000);
                     reject(false); 
+                    setLoginLoading(false); 
                 }
             },
             error: errorHandler
@@ -233,6 +249,8 @@ function addErrorClass(input, message = '') {
 
 function login() {
     var loader = $('#overlay, #loader').css('z-index', 1090);
+    setLoginLoading(true); 
+
     const userNameInput = document.getElementById('UserNameLogin');
     const passwordInput = document.getElementById('PasswordLogin');
     const captchaCodeInput = document.getElementById('captchaCode');
@@ -257,22 +275,25 @@ function login() {
     if (!UserName) {
         addErrorClass(userNameInput, 'Username is required');
         hasErrors = true;
+        setLoginLoading(false); 
     }
 
     if (!Password) {
         addErrorClass(passwordInput, 'Password is required');
         hasErrors = true;
+        setLoginLoading(false); 
     }
 
     if (!captchaCode) {
         addErrorClass(captchaCodeInput, 'Security verification is required');
         hasErrors = true;
+        setLoginLoading(false); 
     }
 
     // If there are validation errors, show toast and return
     if (hasErrors) {
         showToast('warning', 'Please fill all required fields!', 'Login failed!', 4000);
-
+        setLoginLoading(false); 
         // Focus on the first error field
         if (!UserName) {
             userNameInput.focus();
@@ -326,11 +347,13 @@ function login() {
                             addErrorClass(passwordInput);
                         }
                     }
+                    setLoginLoading(false); 
                 },
                 error: function (xhr, status, error) {
                     errorHandler(xhr, status, error);
                     addErrorClass(userNameInput);
                     addErrorClass(passwordInput);
+                    setLoginLoading(false); 
                 }
             });
         })

CPRNIMS.WebApps/wwwroot/JsFunctions/Items/ItemManagementV9.js

@@ -64,7 +64,9 @@ $(document).ready(function () {
             },
             dataSrc: function (json) {
                 return json.data;   // ← extract data array here
-            }
+            },
+            beforeSend: function () { loader.show(); },
+            complete: function () { loader.hide(); },
         },
 
         columns: [

CPRNIMS.WebApps/wwwroot/JsFunctions/PO/CustomPOV8.js

@@ -122,8 +122,8 @@ async function fetchAndPopulatePOFormData(poType, poId = null) {
     });
 }
 function enablePONoAutocomplete() {
-    poDataTable.clear().draw();
     
+    clearCustomTable();
     document.getElementById('customPOHeading').innerHTML = 'Custom P.O. Modification';
     customFormPOElemComponent(4);
     document.getElementById("poNo").removeAttribute("readonly");
@@ -132,6 +132,9 @@ function enablePONoAutocomplete() {
     document.getElementById("poType").value = "0";
     popPONo();
 }
+function clearCustomTable() {
+    poDataTable.clear().draw();
+} 
 // =====================================================================
 // UTILITIES
 // =====================================================================

CPRNIMS.WebApps/wwwroot/JsFunctions/PR/DetailedPRTrackingV9.js

@@ -6,6 +6,7 @@
         serverSide: true,
         processing: true,
         searching: false,
+        ordering: false,
         ajax: {
             url: endpoint.GetDetailedPRTracking,
             type: 'GET',

CPRNIMS.WebApps/wwwroot/css/PR/PRTabsV2.css

@@ -1,63 +1,99 @@
-/* Tab Header Container */
+.pr-tabs-header {
-.pr-tabs-header {
-    background: teal;
     border-bottom: 1px solid #00695c;
     margin: -1rem -1rem 0 -1rem;
+    background: linear-gradient( 270deg, #004d40, #00695c, #00897b, #00acc1, #00897b, #00695c, #004d40 );
+    background-size: 300% 100%;
+    animation: gradientShimmer 6s ease infinite;
+    color: white;
     padding: 0;
-    border-radius: 15px 10px 0 0;
+    border-radius: 8px;
+    text-align: center;
+    box-shadow: 0 4px 12px rgba(0, 150, 136, 0.3);
+    position: relative;
+    overflow: visible;
+    min-height: 58px;
+}
+    /* Light sweep over the tab header */
+    .pr-tabs-header::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 60%;
+        height: 100%;
+        background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0.13) 50%, rgba(255,255,255,0.06) 60%, transparent 100% );
+        animation: lightSweep 4s ease-in-out infinite;
+        pointer-events: none;
+        border-radius: 8px;
+        z-index: 0;
     }
-
-/* Tab Navigation */
 .pr-tabs-nav {
     display: flex;
     gap: 0;
     align-items: stretch;
     padding: 0;
-
+    min-height: 58px;
+    position: relative;
+    z-index: 1;
 }
 
-/* Individual Tab Button */
 .pr-tab-btn {
     flex: 0 0 auto;
-    padding: 14px 32px;
+    padding: 25px 40px;
     background: transparent;
     border: none;
-    border-bottom: 3px solid transparent;
+    border-bottom: none;
-    color: white;
+    color: rgba(255, 255, 255, 0.9);
     font-size: 15px;
     font-weight: 500;
-    border-radius: 15px 0px 0 0;
+    border-radius: 0;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     letter-spacing: 0.3px;
+    margin: 0;
+    z-index: 2;
 }
-
-    /* Tab Hover State */
     .pr-tab-btn:hover {
         background: rgba(255, 255, 255, 0.15);
         color: white;
+        border-radius: 0;
     }
 
-    /* Active Tab */
     .pr-tab-btn.active {
         background: white;
-        color: teal;
+        color: #00695c;
-        font-weight: 600;
+        font-weight: 800;
-        border-bottom-color: white;
+        border-radius: 15px 15px 0 0;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
+        margin: 2px 0 0 8px;
+        padding: 12px 36px 18px 36px;
+        position: relative;
+        z-index: 3; /* above sweep layer */
     }
 
-        /* Active Tab Accent Line */
         .pr-tab-btn.active::before {
-            content: '';
+            display: none;
-            position: absolute;
+        }
-            bottom: -3px;
+
-            left: 0;
+    .pr-tab-btn:first-child.active {
-            right: 0;
+        margin-left: 8px;
-            height: 3px;
+    }
-            background: white;
+
+
+@keyframes lightSweep {
+    0% {
+        left: -100%;
+    }
+
+    50% {
+        left: 150%;
+    }
+
+    100% {
+        left: 150%;
+    }
 }
 
     /* Loading State */
@@ -124,15 +160,23 @@
         transform: translateX(-10px);
     }
 
-/* Table Container Adjustments */
 .table-container {
     margin-top: -15px !important;
     overflow: hidden;
+    background: #ffffff;
+    border-radius: 12px !important;
+    box-shadow: 0 4px 20px rgba(0, 150, 136, 0.12);
+    border: 1px solid rgba(0, 150, 136, 0.12);
+}
+    .table-container.rounded {
+        border-radius: 12px !important;
     }
 
-    /* Ensure table container has proper border radius */
+    .table-container::before {
-    .table-container.rounded {
+        content: '';
-        border-radius: 5px !important;
+        display: block;
+        height: 4px;
+        background: linear-gradient(135deg, #00695c 0%, #00acc1 100%);
     }
 
 /* Responsive Design */

CPRNIMS.WebApps/wwwroot/css/sideBarStyleV2.css

@@ -1,4 +1,3 @@
-/* Google Font Link */
 @import url('poppins.css');
 *{
   margin: 0;
@@ -6,19 +5,16 @@
   box-sizing: border-box;
   font-family: "Poppins" , sans-serif;
 }
-/*NewlyAdded*/
+
-/* Default text color for sub-menu items */
 .sidebar .sub-menu li a {
     color: #fff;
     padding-left: 10px;
 }
-
-    /* Change text color to teal on hover */
     .sidebar .sub-menu li a:hover {
-        color: teal;
+        background: rgba(255,255,255,0.1);
+        color: white;
     }
 
-/* Add padding to the sub-menu items to move text to the right */
 .sidebar .sub-menu li a {
     padding-left: 10px;
 }
@@ -32,18 +28,17 @@
     .sidebar .sub-menu.open {
         display: block;
     }
-
-
 .sidebar {
     position: fixed;
     left: 0;
     top: 0;
     height: 100%;
     width: 78px;
-  background: #008080;
+    background: linear-gradient(180deg, #004d40 0%, #00695c 40%, #00897b 70%, #00acc1 100%);
     padding: 6px 14px;
     z-index: 99;
     transition: all 0.5s ease;
+    box-shadow: 4px 0 20px rgba(0, 105, 92, 0.4);
 }
 .sidebar.open{
   width: 260px;
@@ -107,12 +102,13 @@
         top: -20px;
         left: calc(100% + 15px);
         z-index: 3;
-  background: #fff;
+        background: linear-gradient(135deg, #00695c, #00acc1);
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+        color: white;
-  padding: 6px 12px;
+        box-shadow: 0 4px 12px rgba(0,150,136,0.3);
-  border-radius: 4px;
+        padding: 6px 14px;
-  font-size: 15px;
+        border-radius: 6px;
-  font-weight: 400;
+        font-size: 13px;
+        font-weight: 500;
         opacity: 0;
         white-space: nowrap;
         pointer-events: none;
@@ -166,14 +162,17 @@
         display: flex;
         height: 100%;
         width: 100%;
-  border-radius: 12px;
+        border-radius: 10px;
         align-items: center;
         text-decoration: none;
-  transition: all 0.4s ease;
+        transition: all 0.3s ease;
-  background: #008080;
+        background: transparent;
+        padding: 4px 6px;
     }
         .sidebar li a:hover {
-  background: #FFF;
+            background: rgba(255,255,255,0.15);
+            backdrop-filter: blur(4px);
+            transform: translateX(2px);
         }
 .sidebar li a .links_name{
   color: #fff;
@@ -184,14 +183,22 @@
   pointer-events: none;
   transition: 0.4s;
 }
+        .sidebar li a.active {
+            background: rgba(255, 255, 255, 0.2);
+            border-left: 3px solid white;
+        }
 .sidebar.open li a .links_name{
   opacity: 1;
   pointer-events: auto;
 }
     .sidebar li a:hover .links_name,
     .sidebar li a:hover i {
-  transition: all 0.5s ease;
+        color: #ffffff;
-  color: #11101D;
+    }
+    .sidebar li a.active-link {
+        background: rgba(255,255,255,0.2);
+        border-left: 3px solid rgba(255,255,255,0.9);
+        box-shadow: inset 0 0 10px rgba(255,255,255,0.05);
     }
 .sidebar li i{
   height: 50px;
@@ -206,10 +213,14 @@
         left: 0;
         bottom: -8px;
         padding: 10px 14px;
-  background: #1d1b31;
+        background: rgba(0,0,0,0.25);
+        backdrop-filter: blur(8px);
+        border-top: 1px solid rgba(255,255,255,0.1);
         transition: all 0.5s ease;
         overflow: hidden;
+        justify-content: center;
     }
+
 .sidebar.open li.profile{
   width: 260px;
 }
@@ -219,8 +230,8 @@
   flex-wrap: nowrap;
 }
 .sidebar li img{
-  height: 80px;
+  height: 50px;
-  width: 80px;
+  width: 50px;
   object-fit: cover;
   border-radius: 100px;
   margin-right: 20px;
@@ -240,11 +251,11 @@
         top: 50%;
         right: 0;
         transform: translateY(-50%);
-  background: #1d1b31;
+        background: rgba(0,0,0,0.2);
         width: 100%;
         height: 90px;
         line-height: 60px;
-  border-radius: 0px;
+        border-radius: 0;
         transition: all 0.5s ease;
     }
 .sidebar.open .profile #log_out{

CPRNIMS.WebApps/wwwroot/css/siteV5.css

@@ -1,167 +0,0 @@
-html {
-    font-size: 14px;
-    position: relative;
-}
-
-@media (min-width: 768px) {
-  html {
-    font-size: 16px;
-  }
-}
-.form-check-label {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    font-size: 16px;
-    font-weight: 500;
-    color: #333;
-    margin-left: 4px;
-}
-.form-group-modern {
-    position: relative;
-    margin-bottom: 1.5rem;
-}
-.form-floating .bi-question-circle {
-    font-size: 1.2rem;
-    color: #6c757d;
-    z-index: 9999 !important; /* higher than modal */
-    font-size: 0.9rem; /* make it cleaner */
-    opacity: 1 !important; /* ensure visible */
-}
-
-    .form-floating .bi-question-circle:hover {
-        color: #0d6efd;
-    }
-
-    .form-group-modern input,
-    .form-group-modern textarea {
-        width: 100%;
-        padding: 10px 10px 10px 5px;
-        border: none;
-        border-bottom: 2px solid #ccc;
-        outline: none;
-        background: transparent;
-        transition: all 0.3s ease;
-    }
-
-        .form-group-modern input:focus,
-        .form-group-modern textarea:focus {
-            border-bottom: 2px solid #00796B; /* teal highlight */
-        }
-
-    .form-group-modern label {
-        position: absolute;
-        top: 10px;
-        left: 5px;
-        font-size: 14px;
-        color: #999;
-        pointer-events: none;
-        transition: 0.3s ease all;
-    }
-
-    .form-group-modern input:focus ~ label,
-    .form-group-modern input:not(:placeholder-shown) ~ label,
-    .form-group-modern textarea:focus ~ label,
-    .form-group-modern textarea:not(:placeholder-shown) ~ label {
-        top: -10px;
-        left: 0;
-        font-size: 12px;
-        color: #00796B;
-    }
-
-.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
-  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
-}
-
-.modal-content {
-    -webkit-border-radius: 10px !important;
-    -moz-border-radius: 10px !important;
-    border-radius: 10px !important;
-}
-.modal-header {
-    margin-top: -15px !important;
-    background-color: teal;
-    color: white;
-    padding: 10px;
-    border-radius: 5px;
-    text-align: center;
-}
-
-/* Custom CSS to change cart icon color to orange */
-.navbar-nav .fa-shopping-cart {
-    color: green;
-}
-#itemPictureImage {
-    display: block;
-    margin: 0 auto; 
-}
-.table-container {
-    margin: 10px;
-}
-.section-container {
-    margin-bottom: 25px;
-}
-.header-container {
-    margin-top: -65px !important;
-    background-color: teal;
-    color: white;
-    padding: 10px;
-    border-radius: 5px;
-    text-align: center;
-}
-.column-search-container {
-    background-color: #f8f9fa;
-    border-radius: 5px;
-    padding: 10px;
-    margin-bottom: 10px;
-}
-
-.column-search-input {
-    font-size: 0.875rem;
-}
-
-.column-search-container .form-label {
-    margin-bottom: 2px;
-    font-weight: 500;
-    color: #495057;
-}
-thead {
-    background-color: teal;
-    color: white;
-}
-table {
-    border-collapse: separate;
-    border-spacing: 0;
-    border-radius: 10px;
-    overflow: hidden;
-}
-
-thead th:first-child {
-    border-top-left-radius: 8px;
-}
-
-thead th:last-child {
-    border-top-right-radius: 8px;
-}
-
-tbody tr:last-child td:first-child {
-    border-bottom-left-radius: 8px;
-}
-
-tbody tr:last-child td:last-child {
-    border-bottom-right-radius: 8px;
-}
-@media print {
-    * {
-        -webkit-print-color-adjust: exact !important;
-        color-adjust: exact !important;
-        print-color-adjust: exact !important;
-    }
-}
-#itemPictureImage {
-    max-width: 100%;
-    max-height: 350px; /* Adjust height limit to fit your modal */
-    width: auto;
-    height: auto;
-    object-fit: contain; /* Keeps aspect ratio without cropping */
-    border-radius: 15px;
-    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
-}

CPRNIMS.WebApps/wwwroot/css/siteV6.css

@@ -0,0 +1,434 @@
+@media (min-width: 768px) {
+  html {
+    font-size: 16px;
+  }
+}
+/* ─── EXPORT BUTTONS ───────────────────────────────────────── */
+.dt-buttons .btn,
+.dt-button {
+    border-radius: 7px !important;
+    font-size: 13px !important;
+    font-weight: 500 !important;
+    padding: 7px 16px !important;
+    transition: all 0.25s ease !important;
+    border: none !important;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
+}
+
+    .btn.btn-secondary, .dt-button.btn-secondary {
+        background: linear-gradient(135deg, #546e7a, #78909c) !important;
+        color: white !important;
+    }
+
+    .btn.btn-success, .dt-button.btn-success {
+        background: linear-gradient(135deg, #2e7d32, #43a047) !important;
+        color: white !important;
+    }
+
+    .btn.btn-danger, .dt-button.btn-danger {
+        background: linear-gradient(135deg, #c62828, #e53935) !important;
+        color: white !important;
+    }
+
+    .dt-buttons .btn:hover,
+    .dt-button:hover {
+        transform: translateY(-1px) !important;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
+        filter: brightness(1.08) !important;
+    }
+
+/* ─── SEARCH INPUTS ────────────────────────────────────────── */
+.input-group,
+.form-control,
+select.form-control,
+input.form-control {
+    border-radius: 8px !important;
+    border: 1.5px solid rgba(0, 150, 136, 0.25) !important;
+    transition: all 0.3s ease !important;
+    font-size: 13.5px !important;
+    color: #333 !important;
+}
+
+    .form-control:focus,
+    select.form-control:focus {
+        border-color: #00acc1 !important;
+        box-shadow: 0 0 0 3px rgba(0, 172, 193, 0.12) !important;
+        outline: none !important;
+    }
+
+/* ─── TABLE ROWS ───────────────────────────────────────────── */
+table.dataTable tbody tr {
+    transition: background 0.2s ease;
+}
+/*
+    table.dataTable tbody tr:nth-child(odd) {
+        background-color: #f9fffe !important;
+    }
+
+    table.dataTable tbody tr:nth-child(even) {
+        background-color: #ffffff !important;
+    }
+
+    table.dataTable tbody tr:hover {
+        background-color: #e0f7f5 !important;
+        cursor: pointer;
+    }
+*/
+table.dataTable tbody td {
+    border-bottom: 1px solid rgba(0, 150, 136, 0.08) !important;
+    padding: 12px !important;
+    font-size: 13.5px;
+    color: #2d2d2d;
+    vertical-align: middle;
+}
+
+/* DataTable header gradient */
+table.dataTable thead th {
+    background: linear-gradient(135deg, #00695c 0%, #00acc1 100%) !important;
+    color: white !important;
+    border-bottom: none !important;
+    font-weight: 600;
+    font-size: 13px;
+    letter-spacing: 0.4px;
+    text-shadow: 0 1px 3px rgba(0,0,0,0.15);
+}
+
+    table.dataTable thead th:not(:last-child) {
+        border-right: 1px solid rgba(255,255,255,0.12) !important;
+    }
+
+    /* Sort icons */
+    table.dataTable thead th.sorting::before,
+    table.dataTable thead th.sorting::after,
+    table.dataTable thead th.sorting_asc::before,
+    table.dataTable thead th.sorting_desc::after {
+        color: rgba(255,255,255,0.6) !important;
+        opacity: 1 !important;
+    }
+
+    /* Remove default border between header cells */
+    table.dataTable thead th:not(:last-child) {
+        border-right: 1px solid rgba(255,255,255,0.15) !important;
+    }
+.form-check-label {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+    margin-left: 4px;
+}
+.form-group-modern {
+    position: relative;
+    margin-bottom: 1.5rem;
+}
+.form-floating .bi-question-circle {
+    font-size: 1.2rem;
+    color: #6c757d;
+    z-index: 9999 !important; /* higher than modal */
+    font-size: 0.9rem; /* make it cleaner */
+    opacity: 1 !important; /* ensure visible */
+}
+
+    .form-floating .bi-question-circle:hover {
+        color: #0d6efd;
+    }
+
+    .form-group-modern input,
+    .form-group-modern textarea {
+        width: 100%;
+        padding: 10px 10px 10px 5px;
+        border: none;
+        border-bottom: 2px solid #ccc;
+        outline: none;
+        background: transparent;
+        transition: all 0.3s ease;
+    }
+
+        .form-group-modern input:focus,
+        .form-group-modern textarea:focus {
+            border-bottom: 2px solid #00796B; /* teal highlight */
+        }
+
+    .form-group-modern label {
+        position: absolute;
+        top: 10px;
+        left: 5px;
+        font-size: 14px;
+        color: #999;
+        pointer-events: none;
+        transition: 0.3s ease all;
+    }
+
+    .form-group-modern input:focus ~ label,
+    .form-group-modern input:not(:placeholder-shown) ~ label,
+    .form-group-modern textarea:focus ~ label,
+    .form-group-modern textarea:not(:placeholder-shown) ~ label {
+        top: -10px;
+        left: 0;
+        font-size: 12px;
+        color: #00796B;
+    }
+
+.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
+  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
+}
+
+.modal-content {
+    -webkit-border-radius: 10px !important;
+    -moz-border-radius: 10px !important;
+    border-radius: 10px !important;
+}
+/* ─── MODAL HEADER ─────────────────────────────────────────── */
+.modal-header {
+    margin-top: -15px !important;
+    background: linear-gradient(135deg, #00695c 0%, #00acc1 100%);
+    color: white;
+    padding: 16px 20px;
+    border-radius: 8px 8px 0 0;
+    text-align: center;
+    box-shadow: 0 4px 15px rgba(0, 150, 136, 0.3);
+    border-bottom: none;
+    position: relative;
+    overflow: hidden;
+}
+
+    .modal-header::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 50%;
+        background: linear-gradient(to bottom, rgba(255,255,255,0.12), transparent);
+        pointer-events: none;
+    }
+
+    .modal-header .modal-title {
+        font-weight: 600;
+        font-size: 1.05rem;
+        letter-spacing: 0.4px;
+        text-shadow: 0 1px 3px rgba(0,0,0,0.2);
+        position: relative;
+        z-index: 1;
+    }
+
+    .modal-header .close,
+    .modal-header .btn-close {
+        color: white !important;
+        opacity: 0.85;
+        text-shadow: none;
+        position: relative;
+        z-index: 1;
+        transition: opacity 0.2s;
+    }
+
+        .modal-header .close:hover,
+        .modal-header .btn-close:hover {
+            opacity: 1;
+        }
+
+
+/* ─── SCROLLBAR ────────────────────────────────────────────── */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f0fdfa;
+}
+
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, #00695c, #00acc1);
+    border-radius: 10px;
+}
+
+    ::-webkit-scrollbar-thumb:hover {
+        background: #00897b;
+    }
+/* Custom CSS to change cart icon color to orange */
+.navbar-nav .fa-shopping-cart {
+    color: green;
+}
+
+#itemPictureImage {
+    display: block;
+    margin: 0 auto; 
+}
+
+.section-container {
+    margin-bottom: 25px;
+}
+
+/* header-container for all pages */
+.header-container {
+    margin-top: -65px !important;
+    background: linear-gradient( 270deg, #004d40, #00695c, #00897b, #00acc1, #00897b, #00695c, #004d40 );
+    background-size: 300% 100%;
+    animation: gradientShimmer 6s ease infinite;
+    color: white;
+    padding: 22px 20px;
+    border-radius: 12px;
+    text-align: center;
+    box-shadow: 0 6px 20px rgba(0, 150, 136, 0.35);
+    position: relative;
+    overflow: hidden;
+}
+
+@keyframes gradientShimmer {
+    0% {
+        background-position: 0% 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+/* Shining light sweep effect on top of the gradient */
+.header-container::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 60%;
+    height: 100%;
+    background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.08) 60%, transparent 100% );
+    animation: lightSweep 4s ease-in-out infinite;
+    pointer-events: none;
+}
+
+@keyframes lightSweep {
+    0% {
+        left: -100%;
+    }
+
+    50% {
+        left: 150%;
+    }
+
+    100% {
+        left: 150%;
+    }
+}
+
+/* Keep text crisp above animations */
+.header-container h1,
+.header-container h2,
+.header-container h3,
+.header-container h4,
+.header-container h5,
+.header-container p,
+.header-container span {
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    text-shadow: 0 2px 6px rgba(0,0,0,0.2);
+    position: relative;
+    z-index: 1;
+    margin: 0;
+}
+/* Subtle shine overlay */
+.header-container::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 50%;
+    background: linear-gradient(to bottom, rgba(255,255,255,0.1), transparent);
+    pointer-events: none;
+}
+
+/* Decorative circle accents */
+.header-container::after {
+    content: '';
+    position: absolute;
+    right: -30px;
+    top: -30px;
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    background: rgba(255,255,255,0.06);
+    pointer-events: none;
+}
+
+.header-container h1,
+.header-container h2,
+.header-container h3,
+.header-container h4,
+.header-container h5,
+.header-container p,
+.header-container span {
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    text-shadow: 0 2px 6px rgba(0,0,0,0.15);
+    position: relative;
+    z-index: 1;
+    margin: 0;
+}
+
+
+.column-search-container {
+    background-color: #f8f9fa;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 10px;
+}
+
+.column-search-input {
+    font-size: 0.875rem;
+}
+
+.column-search-container .form-label {
+    margin-bottom: 2px;
+    font-weight: 500;
+    color: #495057;
+}
+
+thead {
+    background-color: teal;
+    color: white;
+}
+
+table {
+    border-collapse: separate;
+    border-spacing: 0;
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+thead th:first-child {
+    border-top-left-radius: 8px;
+}
+
+thead th:last-child {
+    border-top-right-radius: 8px;
+}
+
+tbody tr:last-child td:first-child {
+    border-bottom-left-radius: 8px;
+}
+
+tbody tr:last-child td:last-child {
+    border-bottom-right-radius: 8px;
+}
+@media print {
+    * {
+        -webkit-print-color-adjust: exact !important;
+        color-adjust: exact !important;
+        print-color-adjust: exact !important;
+    }
+}
+#itemPictureImage {
+    max-width: 100%;
+    max-height: 350px; /* Adjust height limit to fit your modal */
+    width: auto;
+    height: auto;
+    object-fit: contain; /* Keeps aspect ratio without cropping */
+    border-radius: 15px;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+}