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

/**
 * Foodlinkk Command Center — mobile (Android + iOS)
 */
: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: 998;
  backdrop-filter: blur(2px);
}

@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; }
  .vtabs-layout { grid-template-columns: 1fr !important; }
  .vtabs-nav {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    position: relative !important;
  }
  .vtabs-nav::before { display: none; }
  .vtab-btn { flex: 0 0 auto; white-space: nowrap; }
  .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; }
}

@media (max-width: 768px) {
  .mobile-menu-btn { display: inline-flex; }
  .mobile-nav-overlay { display: block; }
  body:not(.nav-open) .mobile-nav-overlay { display: none; }
  .app-shell {
    grid-template-columns: 1fr !important;
    display: block !important;
  }
  .app-sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: min(280px, 88vw);
    height: 100dvh !important;
    z-index: 999;
    transform: translateX(-105%);
    transition: transform 0.3s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
    padding-top: max(1rem, var(--safe-top));
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  body.nav-open .app-sidebar { transform: translateX(0); }
  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%;
  }
}

.pwa-install-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
  padding: 0.75rem 1rem;
  padding-bottom: max(0.75rem, var(--safe-bottom));
  background: rgba(8, 12, 18, 0.95);
  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; } }