SysOps: approved_backup — 2026-08-16 11:01 UTC

cockpit/static/css/mobile.css

@@ -1,5 +1,6 @@
 /**
  * Foodlinkk Command Center — mobile (Android + iOS)
+ * Must load LAST so it wins over app-sidebar-neo / herman-dashboard.
  */
 :root {
   --safe-top: env(safe-area-inset-top, 0px);
@@ -32,8 +33,9 @@ body { overflow-x: hidden; padding-bottom: var(--safe-bottom); }
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.55);
-  z-index: 998;
-  backdrop-filter: blur(2px);
+  z-index: 999;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
 }
 
 @media (max-width: 1024px) {
@@ -87,43 +89,59 @@ body { overflow-x: hidden; padding-bottom: var(--safe-bottom); }
   .regs-columns[style*="repeat(3"] { grid-template-columns: 1fr !important; }
   .regs-columns { flex-direction: column !important; display: flex !important; }
   .pwa-install-bar { display: flex; }
+
+  /* Scherper op tablet/mobiel: minder soft blur */
+  .hm-panel, .hm-chart-panel, .live-digest, .briefing-card,
+  .ha-panel, .panel {
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+  }
 }
 
 @media (max-width: 768px) {
-  .mobile-menu-btn { display: inline-flex; }
+  .mobile-menu-btn { display: inline-flex !important; }
   .mobile-nav-overlay { display: block; }
-  body:not(.nav-open) .mobile-nav-overlay { display: none; }
+  body:not(.nav-open) .mobile-nav-overlay { display: none !important; }
+
   .app-shell {
     grid-template-columns: 1fr !important;
     display: block !important;
   }
   .app-main {
     margin-left: 0 !important;
+    width: 100% !important;
+    max-width: 100vw !important;
   }
+
+  /* Hard overrides — must beat app-sidebar-neo.css */
   .app-sidebar {
     position: fixed !important;
-    top: 0; left: 0; bottom: 0;
-    width: min(280px, 88vw);
+    top: 0 !important;
+    left: 0 !important;
+    bottom: 0 !important;
+    width: min(280px, 88vw) !important;
     height: 100dvh !important;
-    z-index: 999;
-    transform: translateX(-105%);
-    transition: transform 0.3s ease;
+    z-index: 1000 !important;
+    transform: translateX(-105%) !important;
+    transition: transform 0.3s ease !important;
     box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
-    padding-top: max(1rem, var(--safe-top));
+    padding-top: max(1rem, var(--safe-top)) !important;
     flex-direction: column !important;
     flex-wrap: nowrap !important;
-    overflow-y: auto;
-    overflow-x: hidden;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
     -webkit-overflow-scrolling: touch;
   }
+  .app-sidebar-resizer { display: none !important; }
   .persona-nav {
     flex: none;
     min-height: auto;
     overflow: visible;
     padding-bottom: 0;
   }
-  body.nav-open .app-sidebar { transform: translateX(0); }
+  body.nav-open .app-sidebar { transform: translateX(0) !important; }
   body.nav-open { overflow: hidden; }
+
   .app-topbar {
     position: sticky; top: 0; z-index: 100;
     padding-top: max(0.5rem, var(--safe-top));
@@ -133,16 +151,43 @@ body { overflow-x: hidden; padding-bottom: var(--safe-bottom); }
   .retail-actions .btn, .herman-briefing-actions .btn {
     min-width: 100%; flex: 1 1 100%;
   }
+
+  .herman-briefing-actions {
+    flex-direction: column;
+  }
+  .herman-briefing-actions .btn {
+    width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .kpi-row, .hm-neo-kpi-row, .hub-kpi-row, .analytics-kpis {
+    grid-template-columns: 1fr !important;
+  }
+  .page-header h1 { font-size: 1.2rem !important; }
 }
 
 .pwa-install-bar {
   display: none;
-  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
+  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10100;
   padding: 0.75rem 1rem;
   padding-bottom: max(0.75rem, var(--safe-bottom));
-  background: rgba(8, 12, 18, 0.95);
+  background: rgba(8, 12, 18, 0.97);
   border-top: 1px solid rgba(148, 163, 184, 0.15);
   align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
 }
 .pwa-install-bar p { margin: 0; font-size: 0.85rem; color: #cbd5e1; flex: 1; }
-@media (display-mode: standalone) { .pwa-install-bar { display: none !important; } }
+.pwa-install-hint {
+  display: none;
+  width: 100%;
+  margin: 0;
+  font-size: 0.78rem;
+  color: #94a3b8;
+  line-height: 1.35;
+}
+.pwa-install-bar.is-ios .pwa-install-hint.is-ios-hint { display: block; }
+.pwa-install-bar.is-android .pwa-install-hint.is-android-hint { display: block; }
+.pwa-install-bar:not(.is-ios):not(.is-android) .pwa-install-hint.is-android-hint { display: block; }
+@media (display-mode: standalone), (display-mode: fullscreen) {
+  .pwa-install-bar { display: none !important; }
+}