Add Docker deployment support and PWA enhancements

- Add Dockerfile with multi-stage build (Node.js + Nginx)
- Add docker-compose.yml for Portainer stack deployment on port 7777
- Add nginx.conf with PWA support, gzip compression, and security headers
- Add .dockerignore for optimized Docker builds
- Add DEPLOYMENT.md with comprehensive deployment guide
- Configure Vite PWA plugin with service worker and offline support
- Add PWA manifest.json with app icons and shortcuts
- Enhance logo.svg with iOS-style glass effects (filters, gradients, highlights)
- Add app-icon.svg for PWA installation
- Update mobile nav with glassmorphic active tab styling
- Fix mobile tab bar layout shift issues with flex-1 and consistent sizing
- Update index.html with PWA meta tags and Apple-specific settings
- Add health check endpoint at /health for container monitoring

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/MobileNav.vue

@@ -1,16 +1,16 @@
 <template>
   <nav class="mobile-nav fixed bottom-0 left-0 right-0 z-50 md:hidden pb-4 px-6">
     <div class="floating-glass-nav px-4 py-3 rounded-2xl">
-      <div class="flex items-center justify-around">
+      <div class="flex items-center justify-around gap-1">
         <button
           v-for="item in navItems"
           :key="item.name"
           @click="navigate(item.path)"
-          class="flex flex-col items-center gap-1 nav-tab"
+          class="flex flex-col items-center gap-1 nav-tab flex-1"
           :class="{ 'nav-tab-active': isActive(item.path) }"
         >
-          <component :is="item.icon" class="w-6 h-6" />
-          <span class="text-xs font-medium">{{ item.name }}</span>
+          <component :is="item.icon" class="w-6 h-6 flex-shrink-0" />
+          <span class="text-xs font-medium whitespace-nowrap">{{ item.name }}</span>
         </button>
       </div>
     </div>
@@ -97,6 +97,8 @@ const isActive = (path: string) => {
   background: transparent;
   border: none;
   cursor: pointer;
+  font-weight: 600;
+  max-width: 80px;
 }
 
 .nav-tab:active {
@@ -104,12 +106,37 @@ const isActive = (path: string) => {
 }
 
 .nav-tab-active {
-  color: rgba(255, 255, 255, 1);
-  text-decoration: none;
-  transition: all 0.3s ease;
+  position: relative;
   padding: 8px 12px;
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.15);
   font-weight: 600;
+  border-radius: 12px;
+  background: rgba(0, 0, 0, 0.35);
+  color: rgba(255, 255, 255, 1);
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.6),
+    inset 0 1px 0 rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  max-width: 80px;
+}
+
+/* Subtle variant with darker grey border for tab bar */
+.nav-tab-active::before {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  border-radius: inherit;
+  padding: 2px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
+  -webkit-mask: 
+    linear-gradient(#fff 0 0) content-box, 
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+  z-index: -1;
 }
 </style>