From d8c29e9cc237449d57455717b205fbc59a41c2c1 Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Thu, 26 Feb 2026 03:09:21 +0000
Subject: [PATCH] fix: redesign edit item modal and resolve saving issue

- Reorganized 'Edit Item' form layout strictly into 2-columns.
- Fixed an orphaned `</div>` tag that had pushed the 'Save Changes' button outside of the form tags.
- Enabled Expiry Date configuration.
- Globally styled all modal title bars to be `bg-primary` (Blue) with white text to satisfy design requests.
---
 index.php | 363 +++++++++++++++++++++++++++---------------------------
 1 file changed, 179 insertions(+), 184 deletions(-)

diff --git a/index.php b/index.php
index d996228..a6accf0 100644
--- a/index.php
+++ b/index.php
@@ -5170,7 +5170,7 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
                         <input type="hidden" name="id" id="outlet_id">
                         <div class="modal-header border-bottom-0 pb-0">
                             <h5 class="modal-title fw-bold" id="outletModalTitle">Add Outlet</h5>
-                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                         </div>
                         <div class="modal-body p-4">
                             <div class="mb-3">
@@ -5330,11 +5330,11 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
                             <div class="modal fade" id="editCustomerModal<?= $c['id'] ?>" tabindex="-1">
                                 <div class="modal-dialog">
                                     <div class="modal-content border-0 shadow text-start">
-                                        <div class="modal-header">
-                                            <h5 class="modal-title">
+                                        <div class="modal-header bg-primary">
+                                            <h5 class="modal-title text-white">
                                                 <span data-en="Edit <?= $currTitle['en'] ?>" data-ar="تعديل <?= $currTitle['ar'] ?>">Edit <?= $currTitle['en'] ?></span>
                                             </h5>
-                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                         </div>
                                         <form method="POST">
                                             <input type="hidden" name="id" value="<?= $c['id'] ?>">
@@ -5428,9 +5428,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
                             <div class="modal fade" id="editCatModal<?= $cat['id'] ?>" tabindex="-1">
                                 <div class="modal-dialog">
                                     <div class="modal-content text-start">
-                                        <div class="modal-header">
-                                            <h5 class="modal-title">Edit Category</h5>
-                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                                        <div class="modal-header bg-primary">
+                                            <h5 class="modal-title text-white">Edit Category</h5>
+                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                         </div>
                                         <form method="POST">
                                             <input type="hidden" name="id" value="<?= $cat['id'] ?>">
@@ -5525,9 +5525,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
                             <div class="modal fade" id="editUnitModal<?= $u['id'] ?>" tabindex="-1">
                                 <div class="modal-dialog">
                                     <div class="modal-content text-start">
-                                        <div class="modal-header">
-                                            <h5 class="modal-title">Edit Unit</h5>
-                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                                        <div class="modal-header bg-primary">
+                                            <h5 class="modal-title text-white">Edit Unit</h5>
+                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                         </div>
                                         <form method="POST">
                                             <input type="hidden" name="id" value="<?= $u['id'] ?>">
@@ -5713,9 +5713,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
                             <div class="modal fade" id="viewItemModal<?= $item['id'] ?>" tabindex="-1">
                                 <div class="modal-dialog">
                                     <div class="modal-content border-0 shadow">
-                                        <div class="modal-header">
-                                            <h5 class="modal-title"><?= htmlspecialchars((string)($item['name_en'] ?? '')) ?></h5>
-                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                                        <div class="modal-header bg-primary">
+                                            <h5 class="modal-title text-white"><?= htmlspecialchars((string)($item['name_en'] ?? '')) ?></h5>
+                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                         </div>
                                         <div class="modal-body">
                                             <div class="text-center mb-3">
@@ -5750,9 +5750,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
                             <div class="modal fade" id="editItemModal<?= $item['id'] ?>" tabindex="-1">
                                 <div class="modal-dialog modal-lg">
                                     <div class="modal-content border-0 shadow">
-                                        <div class="modal-header">
-                                            <h5 class="modal-title" data-en="Edit Item" data-ar="تعديل صنف">Edit Item</h5>
-                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                                        <div class="modal-header bg-primary">
+                                            <h5 class="modal-title text-white" data-en="Edit Item" data-ar="تعديل صنف">Edit Item</h5>
+                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                         </div>
                                         <form method="POST" enctype="multipart/form-data">
                                             <input type="hidden" name="id" value="<?= $item['id'] ?>">
@@ -5776,22 +5776,11 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
                                                             </button>
                                                         </div>
                                                     </div>
-...
                                                     <div class="col-md-6">
-                                                        <label class="form-label">SKU</label>
+                                                        <label class="form-label">SKU / Barcode</label>
                                                         <input type="text" name="sku" class="form-control" value="<?= htmlspecialchars((string)($item['sku'] ?? '')) ?>">
                                                     </div>
-                                                    </div>
                                                     <div class="col-md-6">
-                                                        <label class="form-label">Name (AR)</label>
-                                                        <div class="input-group">
-                                                            <input type="text" name="name_ar" id="editItemNameAr<?= $item['id'] ?>" class="form-control" value="<?= htmlspecialchars($item['name_ar']) ?>" required>
-                                                            <button class="btn btn-outline-secondary btn-translate" type="button" data-source="editItemNameEn<?= $item['id'] ?>" data-target="editItemNameAr<?= $item['id'] ?>" data-to="ar">
-                                                                <i class="bi bi-translate"></i> AR
-                                                            </button>
-                                                        </div>
-                                                    </div>
-                                                    <div class="col-md-4">
                                                         <label class="form-label" data-en="Category" data-ar="الفئة">Category</label>
                                                         <select name="category_id" class="form-select">
                                                             <option value="">---</option>
@@ -5800,7 +5789,7 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
                                                             <?php endforeach; ?>
                                                         </select>
                                                     </div>
-                                                    <div class="col-md-4">
+                                                    <div class="col-md-6">
                                                         <label class="form-label">Unit</label>
                                                         <select name="unit_id" class="form-select">
                                                             <option value="">---</option>
@@ -5809,7 +5798,7 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
                                                             <?php endforeach; ?>
                                                         </select>
                                                     </div>
-                                                    <div class="col-md-4">
+                                                    <div class="col-md-6">
                                                         <label class="form-label" data-en="Supplier" data-ar="المورد">Supplier</label>
                                                         <select name="supplier_id" class="form-select">
                                                             <option value="">---</option>
@@ -5818,45 +5807,51 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
                                                             <?php endforeach; ?>
                                                         </select>
                                                     </div>
-                                                    <div class="col-md-3">
+                                                    <div class="col-md-6">
                                                         <label class="form-label">Sale Price</label>
                                                         <input type="number" step="0.001" name="sale_price" class="form-control" value="<?= (float)$item['sale_price'] ?>">
                                                     </div>
-                                                    <div class="col-md-3">
+                                                    <div class="col-md-6">
                                                         <label class="form-label">Purchase Price</label>
                                                         <input type="number" step="0.001" name="purchase_price" class="form-control" value="<?= (float)$item['purchase_price'] ?>">
                                                     </div>
-                                                    <div class="col-md-3">
+                                                    <div class="col-md-6">
                                                         <label class="form-label">Stock Qty</label>
                                                         <input type="number" step="0.001" name="stock_quantity" class="form-control" value="<?= (float)$item['stock_quantity'] ?>">
                                                     </div>
-                                                    <div class="col-md-3">
+                                                    <div class="col-md-6">
                                                         <label class="form-label">Min Level</label>
                                                         <input type="number" step="0.001" name="min_stock_level" class="form-control" value="<?= (float)$item['min_stock_level'] ?>">
                                                     </div>
-                                                    <div class="col-md-6">
-                                                        <label class="form-label">SKU</label>
-                                                        <input type="text" name="sku" class="form-control" value="<?= htmlspecialchars($item['sku']) ?>">
-                                                    </div>
                                                     <div class="col-md-6">
                                                         <label class="form-label">VAT Rate (%)</label>
                                                         <input type="number" step="0.01" name="vat_rate" class="form-control" value="<?= number_format((float)$item['vat_rate'], 2, '.', '') ?>">
                                                     </div>
-                                                    <div class="col-md-12">
+                                                    <div class="col-md-6">
                                                         <label class="form-label">Item Picture</label>
                                                         <input type="file" name="image" class="form-control" accept="image/*">
                                                     </div>
-                                                    <div class="col-12">
+                                                    <div class="col-md-6">
+                                                        <div class="form-check form-switch mt-4">
+                                                            <input class="form-check-input hasExpiryToggleEdit" type="checkbox" id="hasExpiryToggleEdit<?= $item['id'] ?>" <?= !empty($item['expiry_date']) ? 'checked' : '' ?>>
+                                                            <label class="form-check-label fw-bold" for="hasExpiryToggleEdit<?= $item['id'] ?>" data-en="Has Expiry Date?" data-ar="هل له تاريخ انتهاء؟">Has Expiry Date?</label>
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-md-6 expiryDateContainerEdit" style="display: <?= !empty($item['expiry_date']) ? 'block' : 'none' ?>;">
+                                                        <label class="form-label" data-en="Expiry Date" data-ar="تاريخ الانتهاء">Expiry Date</label>
+                                                        <input type="date" name="expiry_date" class="form-control" value="<?= $item['expiry_date'] ?? '' ?>">
+                                                    </div>
+                                                    <div class="col-12 mt-3">
                                                         <hr>
                                                         <h6 data-en="Promotion Details" data-ar="تفاصيل العرض">Promotion Details</h6>
                                                     </div>
-                                                    <div class="col-md-4">
-                                                        <div class="form-check form-switch mt-4">
+                                                    <div class="col-md-12">
+                                                        <div class="form-check form-switch mt-2 mb-2">
                                                             <input class="form-check-input isPromotionToggleEdit" type="checkbox" name="is_promotion" value="1" <?= $item['is_promotion'] ? 'checked' : '' ?> id="isPromotionToggleEdit<?= $item['id'] ?>" data-id="<?= $item['id'] ?>">
-                                                            <label class="form-check-label" for="isPromotionToggleEdit<?= $item['id'] ?>" data-en="On Promotion?" data-ar="في العرض؟">On Promotion?</label>
+                                                            <label class="form-check-label fw-bold" for="isPromotionToggleEdit<?= $item['id'] ?>" data-en="On Promotion?" data-ar="في العرض؟">On Promotion?</label>
                                                         </div>
                                                     </div>
-                                                    <div class="col-md-8">
+                                                    <div class="col-md-12">
                                                         <div class="row g-3 promotionFieldsContainerEdit" id="promotionFieldsContainerEdit<?= $item['id'] ?>" style="display: <?= $item['is_promotion'] ? 'flex' : 'none' ?>;">
                                                             <div class="col-md-4">
                                                                 <label class="form-label">Start Date</label>
@@ -5874,9 +5869,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div class="modal-footer">
-                                                <button type="button" class="btn btn-light" data-bs-dismiss="modal" data-en="Cancel" data-ar="إلغاء">Cancel</button>
-                                                <button type="submit" name="edit_item" class="btn btn-primary">Update Item</button>
+                                            <div class="modal-footer bg-light">
+                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-en="Cancel" data-ar="إلغاء">Cancel</button>
+                                                <button type="submit" name="edit_item" class="btn btn-primary px-4"><i class="bi bi-save"></i> Save Changes</button>
                                             </div>
                                         </form>
                                     </div>
@@ -7129,8 +7124,8 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
     <div class="modal fade" id="openRegisterModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title">Open Cash Register</h5>
+                <div class="modal-header bg-primary">
+                    <h5 class="modal-title text-white">Open Cash Register</h5>
                 </div>
                 <form method="POST">
                     <div class="modal-body">
@@ -7166,9 +7161,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
     <div class="modal fade" id="closeRegisterModal" tabindex="-1">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title">Close Cash Register</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                <div class="modal-header bg-primary">
+                    <h5 class="modal-title text-white">Close Cash Register</h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <form method="POST">
                     <div class="modal-body">
@@ -7988,9 +7983,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
     <div class="modal fade" id="addPaymentMethodModal" tabindex="-1">
         <div class="modal-dialog">
             <div class="modal-content border-0 shadow">
-                <div class="modal-header">
-                    <h5 class="modal-title" data-en="Add Payment Method" data-ar="إضافة طريقة دفع">Add Payment Method</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                <div class="modal-header bg-primary">
+                    <h5 class="modal-title text-white" data-en="Add Payment Method" data-ar="إضافة طريقة دفع">Add Payment Method</h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <form method="POST">
                     <div class="modal-body">
@@ -8048,9 +8043,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
                             <div class="modal fade" id="editExpCatModal<?= $cat['id'] ?>" tabindex="-1">
                                 <div class="modal-dialog">
                                     <div class="modal-content text-start">
-                                        <div class="modal-header">
-                                            <h5 class="modal-title">Edit Category</h5>
-                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                                        <div class="modal-header bg-primary">
+                                            <h5 class="modal-title text-white">Edit Category</h5>
+                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                         </div>
                                         <form method="POST">
                                             <input type="hidden" name="id" value="<?= $cat['id'] ?>">
@@ -8096,9 +8091,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
     <div class="modal fade" id="addExpenseCategoryModal" tabindex="-1">
         <div class="modal-dialog">
             <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title">Add Category</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                <div class="modal-header bg-primary">
+                    <h5 class="modal-title text-white">Add Category</h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <form method="POST">
                     <div class="modal-body">
@@ -8446,9 +8441,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
     <div class="modal fade" id="journalModal" tabindex="-1">
         <div class="modal-dialog modal-lg">
             <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" data-en="Journal Entry Details" data-ar="تفاصيل قيد اليومية">Journal Entry Details</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                <div class="modal-header bg-primary">
+                    <h5 class="modal-title text-white" data-en="Journal Entry Details" data-ar="تفاصيل قيد اليومية">Journal Entry Details</h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <div class="modal-body">
                     <table class="table table-bordered">
@@ -8562,9 +8557,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
                             <div class="modal fade" id="editExpenseModal<?= $exp['id'] ?>" tabindex="-1">
                                 <div class="modal-dialog">
                                     <div class="modal-content text-start">
-                                        <div class="modal-header">
-                                            <h5 class="modal-title">Edit Expense</h5>
-                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                                        <div class="modal-header bg-primary">
+                                            <h5 class="modal-title text-white">Edit Expense</h5>
+                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                         </div>
                                         <form method="POST">
                                             <input type="hidden" name="id" value="<?= $exp['id'] ?>">
@@ -8616,9 +8611,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
     <div class="modal fade" id="addExpenseModal" tabindex="-1">
         <div class="modal-dialog">
             <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title">Add Expense</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                <div class="modal-header bg-primary">
+                    <h5 class="modal-title text-white">Add Expense</h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <form method="POST">
                     <div class="modal-body">
@@ -8951,9 +8946,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
                     <div class="modal fade" id="editHrDepartmentModal<?= $d['id'] ?>" tabindex="-1">
                         <div class="modal-dialog">
                             <div class="modal-content border-0 shadow">
-                                <div class="modal-header">
-                                    <h5 class="modal-title" data-en="Edit Department" data-ar="تعديل القسم">Edit Department</h5>
-                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                                <div class="modal-header bg-primary">
+                                    <h5 class="modal-title text-white" data-en="Edit Department" data-ar="تعديل القسم">Edit Department</h5>
+                                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                 </div>
                                 <form method="POST">
                                     <input type="hidden" name="id" value="<?= $d['id'] ?>">
@@ -9028,9 +9023,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
                     <div class="modal fade" id="editHrEmployeeModal<?= $e['id'] ?>" tabindex="-1">
                         <div class="modal-dialog modal-lg">
                             <div class="modal-content border-0 shadow">
-                                <div class="modal-header">
-                                    <h5 class="modal-title" data-en="Edit Employee" data-ar="تعديل الموظف">Edit Employee</h5>
-                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                                <div class="modal-header bg-primary">
+                                    <h5 class="modal-title text-white" data-en="Edit Employee" data-ar="تعديل الموظف">Edit Employee</h5>
+                                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                 </div>
                                 <form method="POST">
                                     <input type="hidden" name="id" value="<?= $e['id'] ?>">
@@ -9155,9 +9150,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
                     <div class="modal fade" id="markAttendanceModal<?= $e['id'] ?>" tabindex="-1">
                         <div class="modal-dialog">
                             <div class="modal-content border-0 shadow">
-                                <div class="modal-header">
-                                    <h5 class="modal-title" data-en="Mark Attendance" data-ar="تسجيل الحضور">Mark Attendance - <?= htmlspecialchars($e['name']) ?></h5>
-                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                                <div class="modal-header bg-primary">
+                                    <h5 class="modal-title text-white" data-en="Mark Attendance" data-ar="تسجيل الحضور">Mark Attendance - <?= htmlspecialchars($e['name']) ?></h5>
+                                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                 </div>
                                 <form method="POST">
                                     <input type="hidden" name="employee_id" value="<?= $e['id'] ?>">
@@ -9202,9 +9197,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
     <div class="modal fade" id="biometricInfoModal" tabindex="-1">
         <div class="modal-dialog">
             <div class="modal-content border-0 shadow">
-                <div class="modal-header">
-                    <h5 class="modal-title" data-en="Biometric Integration Info" data-ar="معلومات تكامل البصمة">Biometric Integration Info</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                <div class="modal-header bg-primary">
+                    <h5 class="modal-title text-white" data-en="Biometric Integration Info" data-ar="معلومات تكامل البصمة">Biometric Integration Info</h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <div class="modal-body">
                     <p data-en="To sync attendance from your biometric device, use the following API endpoint:" data-ar="لمزامنة الحضور من جهاز البصمة الخاص بك، استخدم نقطة نهاية API التالية:">
@@ -9312,9 +9307,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
     <div class="modal fade" id="generatePayrollModal" tabindex="-1">
         <div class="modal-dialog">
             <div class="modal-content border-0 shadow">
-                <div class="modal-header">
-                    <h5 class="modal-title" data-en="Generate Payroll" data-ar="توليد الرواتب">Generate Payroll</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                <div class="modal-header bg-primary">
+                    <h5 class="modal-title text-white" data-en="Generate Payroll" data-ar="توليد الرواتب">Generate Payroll</h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <form method="POST">
                     <input type="hidden" name="month" value="<?= $data['month'] ?>">
@@ -9407,9 +9402,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
                     <div class="modal fade" id="editDeviceModal<?= $d['id'] ?>" tabindex="-1">
                         <div class="modal-dialog">
                             <div class="modal-content border-0 shadow">
-                                <div class="modal-header">
-                                    <h5 class="modal-title" data-en="Edit Device" data-ar="تعديل الجهاز">Edit Device</h5>
-                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                                <div class="modal-header bg-primary">
+                                    <h5 class="modal-title text-white" data-en="Edit Device" data-ar="تعديل الجهاز">Edit Device</h5>
+                                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                 </div>
                                 <form method="POST">
                                     <input type="hidden" name="id" value="<?= $d['id'] ?>">
@@ -9457,9 +9452,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
     <div class="modal fade" id="addDeviceModal" tabindex="-1">
         <div class="modal-dialog">
             <div class="modal-content border-0 shadow">
-                <div class="modal-header">
-                    <h5 class="modal-title" data-en="Add Biometric Device" data-ar="إضافة جهاز بصمة">Add Biometric Device</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                <div class="modal-header bg-primary">
+                    <h5 class="modal-title text-white" data-en="Add Biometric Device" data-ar="إضافة جهاز بصمة">Add Biometric Device</h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <form method="POST">
                     <div class="modal-body">
@@ -9558,7 +9553,7 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
                             <div class="modal-content shadow border-0 rounded-4">
                                 <div class="modal-header border-0">
                                     <h5 class="modal-title fw-bold" data-en="Edit Device" data-ar="تعديل الجهاز">Edit Device</h5>
-                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                 </div>
                                 <form method="POST">
                                     <input type="hidden" name="id" value="<?= $d['id'] ?>">
@@ -9629,7 +9624,7 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
             <div class="modal-content shadow border-0 rounded-4">
                 <div class="modal-header border-0">
                     <h5 class="modal-title fw-bold" data-en="Add POS Device" data-ar="إضافة جهاز">Add POS Device</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <form method="POST">
                     <div class="modal-body">
@@ -9882,9 +9877,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
                             <div class="modal fade" id="editRoleGroupModal<?= $group['id'] ?>" tabindex="-1">
                                 <div class="modal-dialog modal-lg">
                                     <div class="modal-content border-0 shadow text-start">
-                                        <div class="modal-header">
+                                        <div class="modal-header bg-primary">
                                             <h5 class="modal-title fw-bold" data-en="Edit Role Group" data-ar="تعديل مجموعة الأدوار">Edit Role Group</h5>
-                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                         </div>
                                         <form method="POST">
                                             <input type="hidden" name="id" value="<?= $group['id'] ?>">
@@ -10268,9 +10263,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
                             <div class="modal fade" id="editUserModal<?= $u['id'] ?>" tabindex="-1">
                                 <div class="modal-dialog">
                                     <div class="modal-content border-0 shadow text-start">
-                                        <div class="modal-header">
+                                        <div class="modal-header bg-primary">
                                             <h5 class="modal-title fw-bold" data-en="Edit User Account" data-ar="تعديل حساب المستخدم">Edit User Account</h5>
-                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                         </div>
                                         <form method="POST">
                                             <input type="hidden" name="id" value="<?= $u['id'] ?>">
@@ -10389,9 +10384,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
                             <div class="modal fade" id="editRegisterModal<?= $r['id'] ?>" tabindex="-1">
                                 <div class="modal-dialog">
                                     <div class="modal-content border-0 shadow">
-                                        <div class="modal-header">
-                                            <h5 class="modal-title">Edit Register</h5>
-                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                                        <div class="modal-header bg-primary">
+                                            <h5 class="modal-title text-white">Edit Register</h5>
+                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                         </div>
                                         <form method="POST">
                                             <div class="modal-body text-start">
@@ -10430,9 +10425,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
     <div class="modal fade" id="addRegisterModal" tabindex="-1">
         <div class="modal-dialog">
             <div class="modal-content border-0 shadow">
-                <div class="modal-header">
-                    <h5 class="modal-title">Add Cash Register</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                <div class="modal-header bg-primary">
+                    <h5 class="modal-title text-white">Add Cash Register</h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <form method="POST">
                     <div class="modal-body">
@@ -10618,9 +10613,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
     <div class="modal fade" id="sessionReportModal<?= $s['id'] ?>" tabindex="-1">
                                 <div class="modal-dialog modal-lg">
                                     <div class="modal-content border-0 shadow">
-                                        <div class="modal-header">
-                                            <h5 class="modal-title">Session Cashflow Report (#<?= $s['id'] ?>)</h5>
-                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                                        <div class="modal-header bg-primary">
+                                            <h5 class="modal-title text-white">Session Cashflow Report (#<?= $s['id'] ?>)</h5>
+                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                         </div>
                                         <div class="modal-body text-start">
                                             <div class="row g-3">
@@ -10848,9 +10843,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
     <div class="modal fade" id="openRegisterModal" tabindex="-1">
         <div class="modal-dialog">
             <div class="modal-content border-0 shadow">
-                <div class="modal-header">
-                    <h5 class="modal-title">Open Register Session</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                <div class="modal-header bg-primary">
+                    <h5 class="modal-title text-white">Open Register Session</h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <form method="POST">
                     <div class="modal-body">
@@ -10882,9 +10877,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
     <div class="modal fade" id="closeRegisterModal" tabindex="-1">
         <div class="modal-dialog">
             <div class="modal-content border-0 shadow">
-                <div class="modal-header">
-                    <h5 class="modal-title">Close Register Session (#<?= $session['id'] ?>)</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                <div class="modal-header bg-primary">
+                    <h5 class="modal-title text-white">Close Register Session (#<?= $session['id'] ?>)</h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <form method="POST">
                     <div class="modal-body">
@@ -11054,9 +11049,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
 <div class="modal fade" id="addHrDepartmentModal" tabindex="-1">
     <div class="modal-dialog">
         <div class="modal-content border-0 shadow">
-            <div class="modal-header">
-                <h5 class="modal-title" data-en="Add HR Department" data-ar="إضافة قسم">Add HR Department</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            <div class="modal-header bg-primary">
+                <h5 class="modal-title text-white" data-en="Add HR Department" data-ar="إضافة قسم">Add HR Department</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
             </div>
             <form method="POST">
                 <div class="modal-body">
@@ -11078,9 +11073,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
 <div class="modal fade" id="addHrEmployeeModal" tabindex="-1">
     <div class="modal-dialog modal-lg">
         <div class="modal-content border-0 shadow">
-            <div class="modal-header">
-                <h5 class="modal-title" data-en="Add HR Employee" data-ar="إضافة موظف">Add HR Employee</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            <div class="modal-header bg-primary">
+                <h5 class="modal-title text-white" data-en="Add HR Employee" data-ar="إضافة موظف">Add HR Employee</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
             </div>
             <form method="POST">
                 <div class="modal-body">
@@ -11137,9 +11132,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
 <div class="modal fade" id="addRoleGroupModal" tabindex="-1">
     <div class="modal-dialog modal-lg">
         <div class="modal-content border-0 shadow">
-            <div class="modal-header">
-                <h5 class="modal-title" data-en="Add Role Group" data-ar="إضافة مجموعة أدوار">Add Role Group</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            <div class="modal-header bg-primary">
+                <h5 class="modal-title text-white" data-en="Add Role Group" data-ar="إضافة مجموعة أدوار">Add Role Group</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
             </div>
             <form method="POST">
                 <div class="modal-body">
@@ -11222,9 +11217,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
 <div class="modal fade" id="addUserModal" tabindex="-1">
     <div class="modal-dialog">
         <div class="modal-content border-0 shadow">
-            <div class="modal-header">
-                <h5 class="modal-title" data-en="Add New User" data-ar="إضافة مستخدم جديد">Add New User</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            <div class="modal-header bg-primary">
+                <h5 class="modal-title text-white" data-en="Add New User" data-ar="إضافة مستخدم جديد">Add New User</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
             </div>
             <form method="POST">
                 <div class="modal-body">
@@ -11276,15 +11271,15 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
 <div class="modal fade" id="addCustomerModal" tabindex="-1">
     <div class="modal-dialog">
         <div class="modal-content border-0 shadow">
-            <div class="modal-header">
-                <h5 class="modal-title">
+            <div class="modal-header bg-primary">
+                <h5 class="modal-title text-white">
                     <?php if ($page === 'suppliers'): ?>
                         <span data-en="Add New Supplier" data-ar="إضافة مورد جديد">Add New Supplier</span>
                     <?php else: ?>
                         <span data-en="Add New Customer" data-ar="إضافة عميل جديد">Add New Customer</span>
                     <?php endif; ?>
                 </h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
             </div>
             <form method="POST">
                 <input type="hidden" name="type" value="<?= $page === 'suppliers' ? 'supplier' : 'customer' ?>">
@@ -11323,9 +11318,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
 <div class="modal fade" id="addItemModal" tabindex="-1">
     <div class="modal-dialog modal-lg">
         <div class="modal-content border-0 shadow">
-            <div class="modal-header">
-                <h5 class="modal-title" data-en="Add New Item" data-ar="إضافة صنف جديد">Add New Item</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            <div class="modal-header bg-primary">
+                <h5 class="modal-title text-white" data-en="Add New Item" data-ar="إضافة صنف جديد">Add New Item</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
             </div>
             <form method="POST" enctype="multipart/form-data">
                 <div class="modal-body">
@@ -11457,9 +11452,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
 <div class="modal fade" id="importItemsModal" tabindex="-1">
     <div class="modal-dialog">
         <div class="modal-content border-0 shadow text-start">
-            <div class="modal-header">
-                <h5 class="modal-title" data-en="Import Items from Excel (CSV)" data-ar="استيراد الأصناف من اكسل (CSV)">Import Items from Excel (CSV)</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            <div class="modal-header bg-primary">
+                <h5 class="modal-title text-white" data-en="Import Items from Excel (CSV)" data-ar="استيراد الأصناف من اكسل (CSV)">Import Items from Excel (CSV)</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
             </div>
             <form method="POST" enctype="multipart/form-data">
                 <div class="modal-body">
@@ -11491,9 +11486,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
 <div class="modal fade" id="importCustomersModal" tabindex="-1">
     <div class="modal-dialog">
         <div class="modal-content border-0 shadow text-start">
-            <div class="modal-header">
-                <h5 class="modal-title" data-en="Import Customers from Excel (CSV)" data-ar="استيراد العملاء من اكسل (CSV)">Import Customers from Excel (CSV)</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            <div class="modal-header bg-primary">
+                <h5 class="modal-title text-white" data-en="Import Customers from Excel (CSV)" data-ar="استيراد العملاء من اكسل (CSV)">Import Customers from Excel (CSV)</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
             </div>
             <form method="POST" enctype="multipart/form-data">
                 <div class="modal-body">
@@ -11520,9 +11515,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
 <div class="modal fade" id="importSuppliersModal" tabindex="-1">
     <div class="modal-dialog">
         <div class="modal-content border-0 shadow text-start">
-            <div class="modal-header">
-                <h5 class="modal-title" data-en="Import Suppliers from Excel (CSV)" data-ar="استيراد الموردين من اكسل (CSV)">Import Suppliers from Excel (CSV)</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            <div class="modal-header bg-primary">
+                <h5 class="modal-title text-white" data-en="Import Suppliers from Excel (CSV)" data-ar="استيراد الموردين من اكسل (CSV)">Import Suppliers from Excel (CSV)</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
             </div>
             <form method="POST" enctype="multipart/form-data">
                 <div class="modal-body">
@@ -11549,9 +11544,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
 <div class="modal fade" id="importCategoriesModal" tabindex="-1">
     <div class="modal-dialog">
         <div class="modal-content border-0 shadow text-start">
-            <div class="modal-header">
-                <h5 class="modal-title" data-en="Import Categories from Excel (CSV)" data-ar="استيراد الفئات من اكسل (CSV)">Import Categories from Excel (CSV)</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            <div class="modal-header bg-primary">
+                <h5 class="modal-title text-white" data-en="Import Categories from Excel (CSV)" data-ar="استيراد الفئات من اكسل (CSV)">Import Categories from Excel (CSV)</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
             </div>
             <form method="POST" enctype="multipart/form-data">
                 <div class="modal-body">
@@ -11578,9 +11573,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
 <div class="modal fade" id="importUnitsModal" tabindex="-1">
     <div class="modal-dialog">
         <div class="modal-content border-0 shadow text-start">
-            <div class="modal-header">
-                <h5 class="modal-title" data-en="Import Units from Excel (CSV)" data-ar="استيراد الوحدات من اكسل (CSV)">Import Units from Excel (CSV)</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            <div class="modal-header bg-primary">
+                <h5 class="modal-title text-white" data-en="Import Units from Excel (CSV)" data-ar="استيراد الوحدات من اكسل (CSV)">Import Units from Excel (CSV)</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
             </div>
             <form method="POST" enctype="multipart/form-data">
                 <div class="modal-body">
@@ -11607,9 +11602,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
 <div class="modal fade" id="addCategoryModal" tabindex="-1">
     <div class="modal-dialog">
         <div class="modal-content border-0 shadow">
-            <div class="modal-header">
-                <h5 class="modal-title" data-en="Add Category" data-ar="إضافة فئة">Add Category</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            <div class="modal-header bg-primary">
+                <h5 class="modal-title text-white" data-en="Add Category" data-ar="إضافة فئة">Add Category</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
             </div>
             <form method="POST">
                 <div class="modal-body">
@@ -11645,9 +11640,9 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
 <div class="modal fade" id="addUnitModal" tabindex="-1">
     <div class="modal-dialog">
         <div class="modal-content border-0 shadow">
-            <div class="modal-header">
-                <h5 class="modal-title" data-en="Add Unit" data-ar="إضافة وحدة">Add Unit</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            <div class="modal-header bg-primary">
+                <h5 class="modal-title text-white" data-en="Add Unit" data-ar="إضافة وحدة">Add Unit</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
             </div>
             <form method="POST">
                 <div class="modal-body">
@@ -12722,9 +12717,9 @@ document.addEventListener('DOMContentLoaded', function() {
     <div class="modal fade" id="viewReturnDetailsModal" tabindex="-1">
         <div class="modal-dialog modal-lg">
             <div class="modal-content text-start border-0 shadow">
-                <div class="modal-header">
-                    <h5 class="modal-title">Return Details <span id="view_return_no"></span></h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                <div class="modal-header bg-primary">
+                    <h5 class="modal-title text-white">Return Details <span id="view_return_no"></span></h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <div class="modal-body">
                     <div class="row mb-4">
@@ -12774,9 +12769,9 @@ document.addEventListener('DOMContentLoaded', function() {
     <div class="modal fade" id="addPurchaseReturnModal" tabindex="-1">
         <div class="modal-dialog modal-lg">
             <div class="modal-content text-start border-0 shadow">
-                <div class="modal-header">
-                    <h5 class="modal-title">Process Purchase Return</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                <div class="modal-header bg-primary">
+                    <h5 class="modal-title text-white">Process Purchase Return</h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <form method="POST">
                     <div class="modal-body">
@@ -12838,9 +12833,9 @@ document.addEventListener('DOMContentLoaded', function() {
     <div class="modal fade" id="addSalesReturnModal" tabindex="-1">
         <div class="modal-dialog modal-lg">
             <div class="modal-content text-start border-0 shadow">
-                <div class="modal-header">
-                    <h5 class="modal-title">Process Sales Return</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                <div class="modal-header bg-primary">
+                    <h5 class="modal-title text-white">Process Sales Return</h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <form method="POST">
                     <div class="modal-body">
@@ -12904,9 +12899,9 @@ document.addEventListener('DOMContentLoaded', function() {
     <div class="modal fade" id="addAccountModal" tabindex="-1">
         <div class="modal-dialog">
             <div class="modal-content border-0 shadow">
-                <div class="modal-header">
-                    <h5 class="modal-title" data-en="Add New Account" data-ar="إضافة حساب جديد">Add New Account</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                <div class="modal-header bg-primary">
+                    <h5 class="modal-title text-white" data-en="Add New Account" data-ar="إضافة حساب جديد">Add New Account</h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <form method="POST">
                     <div class="modal-body">
@@ -12958,7 +12953,7 @@ document.addEventListener('DOMContentLoaded', function() {
         <div class="modal-dialog modal-lg">
             <div class="modal-content border-0 shadow">
                 <div class="modal-header bg-success text-white">
-                    <h5 class="modal-title" data-en="New Manual Journal Entry" data-ar="قيد يومية يدوي جديد">New Manual Journal Entry</h5>
+                    <h5 class="modal-title text-white" data-en="New Manual Journal Entry" data-ar="قيد يومية يدوي جديد">New Manual Journal Entry</h5>
                     <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <form method="POST">
@@ -13126,7 +13121,7 @@ document.addEventListener('DOMContentLoaded', function() {
         <div class="modal-dialog modal-xl">
             <div class="modal-content border-0 shadow">
                 <div class="modal-header bg-primary text-white">
-                    <h5 class="modal-title" data-en="Create New Tax Invoice" data-ar="إنشاء فاتورة ضريبية جديدة">Create New Tax Invoice</h5>
+                    <h5 class="modal-title text-white" data-en="Create New Tax Invoice" data-ar="إنشاء فاتورة ضريبية جديدة">Create New Tax Invoice</h5>
                     <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <form method="POST">
@@ -13230,7 +13225,7 @@ document.addEventListener('DOMContentLoaded', function() {
         <div class="modal-dialog modal-xl">
             <div class="modal-content border-0 shadow">
                 <div class="modal-header bg-primary text-white">
-                    <h5 class="modal-title" data-en="Edit Invoice" data-ar="تعديل الفاتورة">Edit Invoice</h5>
+                    <h5 class="modal-title text-white" data-en="Edit Invoice" data-ar="تعديل الفاتورة">Edit Invoice</h5>
                     <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <form method="POST">
@@ -13335,7 +13330,7 @@ document.addEventListener('DOMContentLoaded', function() {
         <div class="modal-dialog modal-xl">
             <div class="modal-content border-0 shadow">
                 <div class="modal-header bg-primary text-white">
-                    <h5 class="modal-title" data-en="Create New LPO" data-ar="إنشاء أمر شراء جديد">Create New LPO</h5>
+                    <h5 class="modal-title text-white" data-en="Create New LPO" data-ar="إنشاء أمر شراء جديد">Create New LPO</h5>
                     <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <form method="POST">
@@ -13418,7 +13413,7 @@ document.addEventListener('DOMContentLoaded', function() {
         <div class="modal-dialog modal-xl">
             <div class="modal-content border-0 shadow">
                 <div class="modal-header bg-primary text-white">
-                    <h5 class="modal-title" data-en="Edit LPO" data-ar="تعديل أمر الشراء">Edit LPO</h5>
+                    <h5 class="modal-title text-white" data-en="Edit LPO" data-ar="تعديل أمر الشراء">Edit LPO</h5>
                     <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <form method="POST">
@@ -13510,7 +13505,7 @@ document.addEventListener('DOMContentLoaded', function() {
         <div class="modal-dialog modal-lg">
             <div class="modal-content border-0 shadow">
                 <div class="modal-header bg-info text-white">
-                    <h5 class="modal-title">LPO Details</h5>
+                    <h5 class="modal-title text-white">LPO Details</h5>
                     <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <div class="modal-body p-4" id="lpoDetailsContent">
@@ -13529,7 +13524,7 @@ document.addEventListener('DOMContentLoaded', function() {
         <div class="modal-dialog modal-xl">
             <div class="modal-content border-0 shadow">
                 <div class="modal-header bg-primary text-white">
-                    <h5 class="modal-title" data-en="Create New Quotation" data-ar="إنشاء عرض سعر جديد">Create New Quotation</h5>
+                    <h5 class="modal-title text-white" data-en="Create New Quotation" data-ar="إنشاء عرض سعر جديد">Create New Quotation</h5>
                     <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <form method="POST">
@@ -13608,7 +13603,7 @@ document.addEventListener('DOMContentLoaded', function() {
         <div class="modal-dialog modal-xl">
             <div class="modal-content border-0 shadow">
                 <div class="modal-header bg-primary text-white">
-                    <h5 class="modal-title" data-en="Edit Quotation" data-ar="تعديل عرض السعر">Edit Quotation</h5>
+                    <h5 class="modal-title text-white" data-en="Edit Quotation" data-ar="تعديل عرض السعر">Edit Quotation</h5>
                     <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <form method="POST">
@@ -13697,7 +13692,7 @@ document.addEventListener('DOMContentLoaded', function() {
         <div class="modal-dialog modal-lg">
             <div class="modal-content border-0 shadow">
                 <div class="modal-header bg-info text-white d-print-none">
-                    <h5 class="modal-title" data-en="View Quotation" data-ar="عرض سعر">View Quotation</h5>
+                    <h5 class="modal-title text-white" data-en="View Quotation" data-ar="عرض سعر">View Quotation</h5>
                     <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <div class="modal-body p-0" id="quotationPrintableArea">
@@ -13804,8 +13799,8 @@ document.addEventListener('DOMContentLoaded', function() {
         <div class="modal-dialog modal-lg">
             <div class="modal-content border-0 shadow">
                 <div class="modal-header d-print-none">
-                    <h5 class="modal-title" data-en="View Invoice" data-ar="عرض الفاتورة">View Invoice</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                    <h5 class="modal-title text-white" data-en="View Invoice" data-ar="عرض الفاتورة">View Invoice</h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <div class="modal-body p-0" id="invoicePrintableArea">
                     <div class="p-4 invoice-printable-container">
@@ -13956,7 +13951,7 @@ document.addEventListener('DOMContentLoaded', function() {
         <div class="modal-dialog">
             <div class="modal-content border-0 shadow">
                 <div class="modal-header bg-success text-white">
-                    <h5 class="modal-title" data-en="Record Payment" data-ar="تسجيل دفعة">Record Payment</h5>
+                    <h5 class="modal-title text-white" data-en="Record Payment" data-ar="تسجيل دفعة">Record Payment</h5>
                     <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <form method="POST">
@@ -14005,8 +14000,8 @@ document.addEventListener('DOMContentLoaded', function() {
         <div class="modal-dialog">
             <div class="modal-content border-0 shadow">
                 <div class="modal-header border-0 pb-0 d-print-none">
-                    <h5 class="modal-title">Payment Receipt</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                    <h5 class="modal-title text-white">Payment Receipt</h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <div class="modal-body p-0" id="printableReceipt">
                     <div class="receipt-container p-4">
@@ -14107,7 +14102,7 @@ document.addEventListener('DOMContentLoaded', function() {
             <div class="modal-content border-0">
                 <div class="modal-header border-0 pb-0">
                     <h5 class="modal-title fw-bold">Payment</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
                     <div class="mb-2 p-2 border rounded bg-light shadow-sm">
@@ -14212,7 +14207,7 @@ document.addEventListener('DOMContentLoaded', function() {
         <div class="modal-dialog modal-sm">
             <div class="modal-content border-0">
                 <div class="modal-header border-0 pb-0">
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body pt-0">
                     <div id="posReceiptContent">
@@ -14234,9 +14229,9 @@ document.addEventListener('DOMContentLoaded', function() {
     <div class="modal fade" id="barcodePrintModal" tabindex="-1">
         <div class="modal-dialog">
             <div class="modal-content border-0 shadow">
-                <div class="modal-header">
-                    <h5 class="modal-title">Print Barcode Label</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                <div class="modal-header bg-primary">
+                    <h5 class="modal-title text-white">Print Barcode Label</h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <div class="modal-body text-center">
                     <div id="barcodeContainer" class="p-4 bg-white border mb-3 mx-auto" style="width: fit-content;">
@@ -14272,8 +14267,8 @@ document.addEventListener('DOMContentLoaded', function() {
         <div class="modal-dialog modal-xl">
             <div class="modal-content border-0 shadow">
                 <div class="modal-header d-print-none">
-                    <h5 class="modal-title">Avery Barcode Labels (A4)</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                    <h5 class="modal-title text-white">Avery Barcode Labels (A4)</h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                 </div>
                 <div class="modal-body">
                     <div class="row mb-4 d-print-none">