foodlinkk-command-center/cockpit/static/css/mobile.css

/**
 * 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);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; padding-bottom: var(--safe-bottom); }

.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.9);
  color: #e2e8f0;
  font-size: 1.35rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 999;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 1024px) {
  .btn, .btn-sm, .nav-pill, .vtab-btn, .side-nav-btn {
    min-height: 44px;
  }
  .form-input, select, textarea, input {
    font-size: 16px !important;
    min-height: 44px;
  }
  .main-topnav {
    padding: 0.75rem;
    padding-left: max(0.75rem, var(--safe-left));
    padding-right: max(0.75rem, var(--safe-right));
  }
  .page-header { flex-direction: column; align-items: stretch !important; gap: 0.75rem; }
  .page-header h1 { font-size: 1.35rem !important; }
  .retail-actions, .herman-briefing-actions {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
  }
  .retail-actions .btn, .herman-briefing-actions .btn {
    flex: 1 1 calc(50% - 0.25rem); min-width: calc(50% - 0.25rem);
  }
  .data-table-wrap, .retail-table-wrap, .panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .data-table { min-width: 520px; }
  .retail-table { min-width: 480px; }
  .kpi-row, .hm-neo-kpi-row, .hub-kpi-row, .analytics-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .hm-exec-grid { grid-template-columns: 1fr !important; }
  .hm-neo-charts, .analytics-charts, .beurs-two-col { grid-template-columns: 1fr !important; }
  .retail-workspace, .retail-workspace.with-filters {
    grid-template-columns: 1fr !important;
  }
  .retail-sidebar .side-nav {
    display: flex; flex-direction: row; overflow-x: auto;
    -webkit-overflow-scrolling: touch; gap: 0.35rem;
  }
  .retail-sidebar .side-nav-btn { flex: 0 0 auto; white-space: nowrap; }
  .retail-map { min-height: 280px !important; height: 45vh !important; }
  .analytics-shell { grid-template-columns: 1fr !important; }
  .hub-grid, .hm-dash-feed, .grid-2, .briefing-summary-grid, .hm-dash-two-col {
    grid-template-columns: 1fr !important;
  }
  .agents-neo-grid, .reports-grid, .concept-grid { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  .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 !important; }
  .mobile-nav-overlay { display: block; }
  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 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(280px, 88vw) !important;
    height: 100dvh !important;
    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)) !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    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) !important; }
  body.nav-open { overflow: hidden; }

  .app-topbar {
    position: sticky; top: 0; z-index: 100;
    padding-top: max(0.5rem, var(--safe-top));
  }
  .app-topbar .page-tip { display: none; }
  .app-clock { font-size: 0.72rem; flex: 1; text-align: right; }
  .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: 10100;
  padding: 0.75rem 1rem;
  padding-bottom: max(0.75rem, var(--safe-bottom));
  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; }
.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; }
}