diff --git a/frontend/js/main.js b/frontend/js/main.js
index 1669e61..b06067d 100644
--- a/frontend/js/main.js
+++ b/frontend/js/main.js
@@ -919,7 +919,7 @@ function showFoodModal() {
     }
   });
 
-  const overlay = document.querySelector(".modal-overlay");
+  const overlay = [...document.querySelectorAll(".modal-overlay")].pop();
   const selectedEl   = overlay.querySelector("#m-selected");
   const manualFields = overlay.querySelector("#m-manual-fields");
   const unitChipsEl  = overlay.querySelector("#m-unit-chips");
@@ -1040,7 +1040,7 @@ function showEditFoodModal(entry) {
     }
   });
 
-  const overlay    = document.querySelector(".modal-overlay");
+  const overlay    = [...document.querySelectorAll(".modal-overlay")].pop();
   const currentEl  = overlay.querySelector("#m-current");
   const searchBlock = overlay.querySelector("#m-search-block");
 
@@ -1395,7 +1395,7 @@ async function showRecipeDetailModal(recipeId) {
   `, () => {});
 
   // Wire up buttons after DOM is ready
-  const overlay = document.querySelector(".modal-overlay");
+  const overlay = [...document.querySelectorAll(".modal-overlay")].pop();
   const logBtn = overlay.querySelector("#rd-log");
   const editBtn = overlay.querySelector("#rd-edit");
   const delBtn = overlay.querySelector("#rd-delete");
@@ -1564,7 +1564,7 @@ async function showRecipeEditorModal(recipeId) {
   });
 
   // Set initial method value
-  const overlay = document.querySelector(".modal-overlay");
+  const overlay = [...document.querySelectorAll(".modal-overlay")].pop();
   if (recipe.cooking_method_id) {
     overlay.querySelector("#re-method").value = recipe.cooking_method_id;
   }
@@ -1716,7 +1716,7 @@ function showFoodFromRecipeModal() {
   });
 
   // Load recipes into the list
-  const overlay = document.querySelector(".modal-overlay");
+  const overlay = [...document.querySelectorAll(".modal-overlay")].pop();
   const listEl = overlay.querySelector("#rfr-list");
 
   (async () => {
@@ -1924,7 +1924,7 @@ async function showGoalMarkersModal() {
 
   // Hide save/cancel since this is a management modal
   setTimeout(() => {
-    const overlay = document.querySelector(".modal-overlay");
+    const overlay = [...document.querySelectorAll(".modal-overlay")].pop();
     if (!overlay) return;
     const btns = overlay.querySelector(".modal-btns");
     if (btns) btns.style.display = "none";
@@ -2326,7 +2326,7 @@ function showMapDownloadModal() {
     okBtn.disabled = false;
   });
 
-  const overlay = document.querySelector(".modal-overlay");
+  const overlay = [...document.querySelectorAll(".modal-overlay")].pop();
   const countEl = overlay.querySelector("#m-tile-count");
 
   // Selection
@@ -3016,7 +3016,7 @@ async function showCompareModal(sessionId, currentSession, currentPoints) {
     </div>`, () => {});
 
   setTimeout(() => {
-    const overlay = document.querySelector(".modal-overlay");
+    const overlay = [...document.querySelectorAll(".modal-overlay")].pop();
     if (!overlay) return;
     // Hide save/cancel buttons — this is a selection modal
     const btns = overlay.querySelector(".modal-btns");
@@ -3201,7 +3201,7 @@ async function showLogSupplementModal() {
     await DB.logSupplement(state.date, time, sid, qty);
   });
 
-  const overlay = document.querySelector(".modal-overlay");
+  const overlay = [...document.querySelectorAll(".modal-overlay")].pop();
   overlay.querySelectorAll(".supp-pick-item").forEach(item => {
     item.onclick = () => {
       overlay.querySelectorAll(".supp-pick-item").forEach(i => i.classList.remove("selected"));
@@ -3626,7 +3626,7 @@ function showProfileModal() {
 
   // Sex chip handler inside modal
   setTimeout(() => {
-    const overlay = document.querySelector(".modal-overlay");
+    const overlay = [...document.querySelectorAll(".modal-overlay")].pop();
     if (!overlay) return;
     overlay.querySelectorAll("[data-sex]").forEach(btn => {
       btn.onclick = () => {
@@ -3730,7 +3730,7 @@ async function showBikeModal(bikeId) {
 
   // Active toggle chips
   setTimeout(() => {
-    const overlay = document.querySelector(".modal-overlay");
+    const overlay = [...document.querySelectorAll(".modal-overlay")].pop();
     if (!overlay) return;
     overlay.querySelectorAll("#m-bike-active-yes, #m-bike-active-no").forEach(btn => {
       btn.onclick = (e) => {