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; }
}





/* ===== War Room FULL CHAT on phone (Android + iOS) ===== */
@media (max-width: 900px) {
  /* Tabs: compact chip row */
  .vtabs-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
    min-height: 0 !important;
  }
  .vtabs-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    padding: 0.3rem !important;
    margin: 0 !important;
  }
  .vtabs-nav .vtab-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
    min-height: 40px !important;
    padding: 0.35rem 0.6rem !important;
  }
  .vtabs-nav-header { display: none !important; }
  .vtabs-content { width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; min-height: 0 !important; }

  /* Hide bulky page chrome in War Room */
  .hm-neo.tab-warroom-active > .wr-page-header,
  .hm-neo.tab-warroom-active > .page-header {
    display: none !important;
  }
  .hm-neo.tab-warroom-active {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100dvh - 3.25rem - env(safe-area-inset-top, 0px)) !important;
    max-height: calc(100dvh - 3.25rem - env(safe-area-inset-top, 0px)) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .hm-neo.tab-warroom-active .vtabs-layout {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
  }
  .hm-neo.tab-warroom-active .vtabs-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
  }
  /* Let Alpine x-show hide inactive tabs; only stretch the visible warroom section */
  .hm-neo.tab-warroom-active .vtabs-content > section:not([style*="display: none"]) {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  .wr-hub-root {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
  }
  .wr-hub-root > .panel {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    padding: 0.35rem !important;
    margin: 0 !important;
    border-radius: 10px !important;
  }
  .wr-layout {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    gap: 0.3rem !important;
  }

  .wr-mobile-bar {
    display: flex !important;
    flex: 0 0 auto;
    gap: 0.3rem;
    align-items: center;
    justify-content: space-between;
  }
  .wr-layout.roster-collapsed .wr-roster { display: none !important; }
  .wr-roster {
    flex: 0 0 auto !important;
    max-height: 18vh !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border: 0 !important;
    border-bottom: 1px solid rgba(148,163,184,0.15) !important;
    padding: 0 0 0.25rem !important;
  }
  .wr-roster h3 { display: none !important; }
  .wr-room-btn, .wr-agent-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 6rem;
  }

  .wr-main {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Compact toolbar */
  .wr-head {
    flex: 0 0 auto !important;
    margin: 0 !important;
    gap: 0.25rem !important;
  }
  .wr-head-title h2 { font-size: 0.9rem !important; }
  .wr-head-title .muted,
  .wr-head-title .wr-msg-count { display: none !important; }
  .wr-head-actions {
    width: 100%;
    gap: 0.25rem !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .wr-head-actions .btn {
    flex: 0 0 auto;
    min-height: 36px !important;
    padding: 0.3rem 0.45rem !important;
    font-size: 0.75rem !important;
  }
  .wr-head-actions .wr-a2a-btn,
  .wr-head-actions button[title="Open op tweede scherm"],
  .wr-head-actions button[title="Spraakmeeting met agents"],
  .wr-head-actions button[title="Snel praten"] {
    display: none !important;
  }

  /* THE chat window — take all remaining space */
  .wr-log {
    flex: 1 1 auto !important;
    min-height: 50dvh !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
    padding: 0.5rem !important;
  }

  /* Readable bubbles */
  .wr-bubble { gap: 0.4rem !important; margin-bottom: 0.55rem !important; }
  .wr-avatar { width: 34px !important; height: 34px !important; flex-basis: 34px !important; }
  .wr-avatar img, .wr-avatar .agent-char-wrap,
  .wr-avatar .agent-char-wrap svg,
  .wr-avatar-fallback { width: 34px !important; height: 34px !important; }
  .wr-bubble-body {
    max-width: calc(100% - 42px) !important;
    width: auto !important;
    padding: 0.45rem 0.55rem !important;
  }
  .wr-bubble-text {
    font-size: 1rem !important;
    line-height: 1.45 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
  .wr-bubble-meta { font-size: 0.72rem !important; }
  .wr-msg-reply, .wr-msg-del { opacity: 0.8 !important; }

  .wr-composer {
    flex: 0 0 auto !important;
    position: relative !important;
    bottom: auto !important;
    z-index: 20;
    margin-top: 0.25rem !important;
    padding-bottom: max(0.35rem, env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(8, 12, 18, 0.98);
  }
  .wr-composer textarea,
  .wr-composer .form-input {
    font-size: 16px !important;
    min-height: 48px !important;
    line-height: 1.35 !important;
  }
  .wr-composer .btn-pulse-green {
    min-height: 48px !important;
    min-width: 4.5rem !important;
  }
  .wr-ceo-panel {
    width: 100% !important;
    max-height: 85dvh !important;
  }
}

/* Less top padding around agents content on phone */
@media (max-width: 900px) {
  .app-main .main-topnav {
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
  }
  body:has(.tab-warroom-active) .app-main .main-topnav .page-tip { display: none !important; }
}

@supports not (height: 100dvh) {
  @media (max-width: 900px) {
    .hm-neo.tab-warroom-active {
      height: calc(100vh - 3.25rem) !important;
      max-height: calc(100vh - 3.25rem) !important;
    }
    .wr-log { min-height: 50vh !important; }
  }
}


/* reply-target mobile */
@media (max-width: 900px) {
  .wr-bubble.is-reply-target .wr-bubble-body {
    outline: 2px solid #38bdf8;
  }
  .wr-msg-del { opacity: 0.35 !important; }
  .wr-msg-reply { opacity: 1 !important; font-weight: 600; }
}