Fix modal positioning and improve login modal as proper overlay popup

assets/css/main.css

@@ -340,9 +340,49 @@ input:focus, textarea:focus, .nui-input:focus, .nui-textarea:focus {
   vertical-align: middle !important;
 }
 
-/* Modal styling */
+/* Modal styling - CRITICAL FIX */
 .nui-modal {
   font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  z-index: 9999 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  backdrop-filter: blur(4px) !important;
+}
+
+.nui-modal-overlay {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  backdrop-filter: blur(4px) !important;
+}
+
+.nui-modal-content {
+  background: white !important;
+  border-radius: 0.5rem !important;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
+  max-width: 90vw !important;
+  max-height: 90vh !important;
+  overflow: auto !important;
+  position: relative !important;
+  z-index: 10000 !important;
+  margin: 1rem !important;
+}
+
+/* Ensure modal is properly centered */
+.nui-modal > div {
+  width: 100% !important;
+  max-width: 400px !important;
+  margin: 0 auto !important;
 }
 
 /* Force logo to be small */

components/LoginModal.vue

@@ -1,8 +1,8 @@
 <template>
-  <UModal v-model="isOpen">
+  <UModal v-model="isOpen" :ui="{ width: 'sm:max-w-md' }">
     <UCard>
       <template #header>
-        <h3 class="text-lg font-semibold">Admin Login</h3>
+        <h3 class="text-lg font-semibold text-gray-900">Admin Login</h3>
       </template>
 
       <form @submit.prevent="handleSubmit" class="space-y-4">
@@ -11,6 +11,7 @@
             v-model="form.username"
             placeholder="Enter username"
             :disabled="loading"
+            class="w-full"
           />
         </UFormGroup>
 
@@ -20,17 +21,19 @@
             type="password"
             placeholder="Enter password"
             :disabled="loading"
+            class="w-full"
           />
         </UFormGroup>
 
-        <div v-if="error" class="text-red-600 text-sm">
+        <div v-if="error" class="text-red-600 text-sm p-3 bg-red-50 border border-red-200 rounded-md">
           {{ error }}
         </div>
 
-        <div class="flex justify-end space-x-2">
+        <div class="flex justify-end space-x-3 pt-4">
           <UButton
             type="button"
             variant="outline"
+            color="gray"
             :disabled="loading"
             @click="close"
           >