New site frontend updates, search, and general bug fixes

map/app/public/css/shifts.css

@@ -209,6 +209,7 @@
 .calendar-dropdown {
     position: relative;
     display: inline-block;
+    z-index: 100; /* Lower than popup but above other content */
 }
 
 .calendar-toggle {
@@ -227,6 +228,7 @@
     box-shadow: 0 4px 12px rgba(0,0,0,0.15);
     z-index: 1000;
     margin-top: 4px;
+    display: none; /* Hidden by default */
 }
 
 .calendar-option {
@@ -428,13 +430,13 @@
 
 /* Calendar shift popup/tooltip */
 .shift-popup {
-    position: absolute;
+    position: fixed; /* Changed from absolute to fixed */
     background: white;
     border: 1px solid #e0e0e0;
     border-radius: var(--border-radius);
     padding: 15px;
     box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-    z-index: 1000;
+    z-index: 10000; /* High z-index to appear above header */
     min-width: 250px;
     max-width: 300px;
 }
@@ -455,6 +457,153 @@
     gap: 10px;
 }
 
+/* Custom Confirmation Modal */
+.confirm-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 20000; /* Even higher than shift popup */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.confirm-modal-backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    animation: fadeInBackdrop 0.2s ease-out;
+}
+
+.confirm-modal-content {
+    background: white;
+    border-radius: var(--border-radius);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+    max-width: 400px;
+    width: 100%;
+    padding: 30px;
+    text-align: center;
+    animation: slideInModal 0.3s ease-out;
+    position: relative;
+}
+
+.confirm-modal-content h3 {
+    margin: 0 0 15px 0;
+    color: var(--dark-color);
+    font-size: 1.2em;
+}
+
+.confirm-modal-content p {
+    margin: 0 0 25px 0;
+    color: var(--secondary-color);
+    line-height: 1.5;
+}
+
+.confirm-modal-actions {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+}
+
+.confirm-modal-actions .btn {
+    padding: 10px 20px;
+    font-weight: 500;
+    min-width: 100px;
+}
+
+/* Animations */
+@keyframes fadeInBackdrop {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes slideInModal {
+    from {
+        opacity: 0;
+        transform: translate(-50%, -60%) scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+
+/* Position the modal content in the center */
+.confirm-modal-content {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+/* Mobile adjustments for confirm modal */
+@media (max-width: 768px) {
+    .confirm-modal-backdrop {
+        padding: 15px;
+    }
+    
+    .confirm-modal-content {
+        padding: 25px 20px;
+        max-width: 90%;
+    }
+    
+    .confirm-modal-content h3 {
+        font-size: 1.1em;
+    }
+    
+    .confirm-modal-actions {
+        flex-direction: column;
+        gap: 10px;
+    }
+    
+    .confirm-modal-actions .btn {
+        width: 100%;
+        min-width: auto;
+    }
+}
+
+@media (max-width: 480px) {
+    .confirm-modal-content {
+        padding: 20px 15px;
+    }
+    
+    .confirm-modal-content h3 {
+        font-size: 1em;
+        margin-bottom: 12px;
+    }
+    
+    .confirm-modal-content p {
+        font-size: 0.9em;
+        margin-bottom: 20px;
+    }
+}
+
+/* Fix for mobile popup positioning */
+@media (max-width: 768px) {
+    .shift-popup {
+        max-width: 90%;
+        left: 5% !important;
+        right: 5% !important;
+        width: auto;
+        position: fixed;
+        top: 50% !important;
+        transform: translateY(-50%);
+    }
+}
+
 /* Mobile adjustments */
 @media (max-width: 768px) {
     /* Ensure proper scrolling on mobile */