diff --git a/src/backpack_utils.php b/src/backpack_utils.php
index 18b35ae..77843ea 100644
--- a/src/backpack_utils.php
+++ b/src/backpack_utils.php
@@ -192,6 +192,28 @@ function render_backpack_modal_script($user_backpacks_json, $all_assigned_backpa
     }
 
     function selectBackpack(userId, bpId) {
+        // Update Logic Data first
+        const oldId = userBackpacksData[userId].current_id;
+        userBackpacksData[userId].current_id = bpId;
+        
+        // Update Global Assigned List
+        // 1. Remove old ID if it was > 0
+        if (oldId > 0) {
+            const index = allAssignedIds.indexOf(parseInt(oldId)); // Ensure type matching
+            if (index > -1) {
+                allAssignedIds.splice(index, 1);
+            } else {
+                // Try string matching if int failed
+                const indexStr = allAssignedIds.indexOf(String(oldId));
+                if (indexStr > -1) allAssignedIds.splice(indexStr, 1);
+            }
+        }
+        
+        // 2. Add new ID if > 0
+        if (bpId > 0) {
+            allAssignedIds.push(parseInt(bpId));
+        }
+
         // Update Hidden Input
         document.getElementById('input_bp_' + userId).value = bpId;
         
diff --git a/src/packing_list_detail.php b/src/packing_list_detail.php
index cd84124..6d11f83 100644
--- a/src/packing_list_detail.php
+++ b/src/packing_list_detail.php
@@ -406,22 +406,43 @@ document.addEventListener('DOMContentLoaded', function() {
     const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
     tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) });
 
-    // Chart logic (GREEN TONES)
+    // Chart logic (GREEN TONES - High Contrast)
     Chart.register(ChartDataLabels);
-    // Green palette ranging from dark to light
+    // Hand-picked palette for better distinction
     const greenColors = [
-        '#004d00', '#006600', '#008000', '#009900', '#00b300', 
-        '#00cc00', '#00e600', '#1aff1a', '#4dff4d', '#80ff80', '#b3ffb3'
+        '#1a535c', // Dark Teal
+        '#4ecdc4', // Teal
+        '#f7fff7', // Very Light (almost white, maybe too light? Let's use a light mint) -> #d8f3dc
+        '#006400', // Dark Green
+        '#2d6a4f', // Deep Green
+        '#40916c', // Medium Green
+        '#52b788', // Light Green
+        '#74c69d', // Lighter Green
+        '#95d5b2', // Pale Green
+        '#b7e4c7', // Very Pale Green
+        '#d8f3dc'  // Mint
     ];
 
+    const chartOptions = { 
+        responsive: true, 
+        maintainAspectRatio: false, 
+        layout: {
+            padding: 20 // Add padding to prevent cutting off hover
+        },
+        plugins: { 
+            legend: { display: false }, 
+            datalabels: { display: false } 
+        } 
+    };
+
     const catCtx = document.getElementById('categoryWeightChart');
     if (catCtx) {
-        new Chart(catCtx, { type: 'doughnut', data: { labels: <?php echo json_encode(array_keys($weight_by_category)); ?>, datasets: [{ data: <?php echo json_encode(array_values($weight_by_category)); ?>, backgroundColor: greenColors, borderWidth: 0, hoverOffset: 15 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, datalabels: { display: false } } } });
+        new Chart(catCtx, { type: 'doughnut', data: { labels: <?php echo json_encode(array_keys($weight_by_category)); ?>, datasets: [{ data: <?php echo json_encode(array_values($weight_by_category)); ?>, backgroundColor: greenColors, borderWidth: 0, hoverOffset: 20 }] }, options: chartOptions });
     }
 
     const carrierCtx = document.getElementById('carrierWeightChart');
     if (carrierCtx) { 
-        new Chart(carrierCtx, { type: 'doughnut', data: { labels: <?php echo json_encode(array_keys($weight_by_carrier)); ?>, datasets: [{ data: <?php echo json_encode(array_values($weight_by_carrier)); ?>, backgroundColor: greenColors, borderWidth: 0, hoverOffset: 15 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, datalabels: { display: false } } } });
+        new Chart(carrierCtx, { type: 'doughnut', data: { labels: <?php echo json_encode(array_keys($weight_by_carrier)); ?>, datasets: [{ data: <?php echo json_encode(array_values($weight_by_carrier)); ?>, backgroundColor: greenColors, borderWidth: 0, hoverOffset: 20 }] }, options: chartOptions });
     }
 
     // Collapsible Tree Logic