/* ============================================================================
   Flow OS — responsive layer for phones & tablets (build 3.261.0)
   ----------------------------------------------------------------------------
   The staff console is desktop-first: a fixed 236px sidebar, a fixed header, and
   html/body{min-width:1180px} (so it scrolls horizontally rather than squeezing).
   This layer, at <=1024px, turns that into a fluid, touch-first app: the sidebar
   becomes an off-canvas drawer (opened by the hamburger the shell injects), the
   content goes full width, dense rows/tables scroll or reflow, modals go
   near-full-screen, and tap targets + input sizes become finger-friendly.

   It's injected on EVERY page by the server (serveStatic), so it also covers the
   customer portal. Shell-structural overrides are written with `html body …`
   specificity + !important so they win no matter what order stylesheets load in.
   The Flow WMS tablet kiosk is intentionally excluded (its own scoped app).
   ========================================================================== */

/* The hamburger is hidden on desktop; shown only in the mobile breakpoint. */
.flow-nav-toggle { display: none; }
.flow-nav-backdrop { display: none; }

/* ============================ TABLET + PHONE (<=1024px) ==================== */
@media (max-width: 1024px) {

  /* -- kill the desktop min-width so the page can actually reflow -- */
  :root, html:root { min-width: 0 !important; }
  :root body, html body { min-width: 0 !important; max-width: 100vw !important; overflow-x: hidden !important; -webkit-text-size-adjust: 100%; }

  /* -- header: flex row that always fits, with room for the hamburger -- */
  html body .flow-3508-global-header, html body .flow-global-header {
    display: flex !important; align-items: center !important; gap: 8px !important;
    padding: 8px calc(10px + env(safe-area-inset-right)) 8px calc(8px + env(safe-area-inset-left)) !important;
    grid-template-columns: none !important;
  }
  html body .flow-header-brand { flex: 0 0 auto !important; }
  html body .flow-header-brand img, html body .flow-3508-global-header .flow-header-logo { max-height: 34px !important; max-width: 120px !important; }
  html body .flow-header-search { flex: 1 1 auto !important; min-width: 0 !important; }
  html body .flow-header-search input { font-size: 16px !important; }
  html body .flow-header-actions { flex: 0 0 auto !important; margin-left: auto !important; display: flex !important; align-items: center !important; gap: 6px !important; }
  .flow-header-actions .label, .flow-header-actions kbd { display: none !important; }

  /* -- hamburger toggle (injected into the header by atlas_shell.js) -- */
  .flow-nav-toggle {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px;
    border: 1px solid rgba(148,168,196,.28); background: rgba(255,255,255,.05);
    color: currentColor; cursor: pointer; padding: 0;
  }
  .flow-nav-toggle:active { background: rgba(255,255,255,.12); }
  .flow-nav-toggle svg { width: 20px; height: 20px; }

  /* -- sidebar => off-canvas drawer -- */
  html body .flow-3508-sidebar, html body .flow-shell-sidebar {
    width: min(86vw, 330px) !important;
    transform: translateX(-104%) !important;
    transition: transform .26s cubic-bezier(.4, 0, .2, 1) !important;
    box-shadow: 0 0 60px rgba(0, 0, 0, .6) !important;
    z-index: 4000 !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
  html body.flow-nav-open .flow-3508-sidebar, html body.flow-nav-open .flow-shell-sidebar { transform: translateX(0) !important; }
  /* the desktop collapse state is meaningless on mobile — always a full drawer */
  html body.flow-sidebar-collapsed .flow-3508-sidebar, html body.flow-sidebar-collapsed .flow-shell-sidebar { width: min(86vw, 330px) !important; }
  .flow-sidebar-resizer, .flow-sidebar-collapse-button, [data-flow-3508-collapse] { display: none !important; }

  /* -- content: full width, no sidebar offset, safe-area padding -- */
  html body .flow-page, html body .flow-main, html body main[data-flow-main],
  html body main.flow-page, html body.flow-sidebar-collapsed .flow-page, html body.flow-sidebar-collapsed .flow-main {
    margin-left: 0 !important; width: auto !important; max-width: 100% !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    box-sizing: border-box !important;
  }

  /* -- drawer backdrop -- */
  .flow-nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 3900;
    background: rgba(4, 8, 18, .55); opacity: 0; pointer-events: none; transition: opacity .26s;
  }
  body.flow-nav-open .flow-nav-backdrop { opacity: 1; pointer-events: auto; }
  /* lock background scroll while the drawer is open */
  body.flow-nav-open { overflow: hidden !important; }

  /* -- finger-friendly targets & no iOS zoom on focus -- */
  input, select, textarea { font-size: 16px !important; }
  .flow-header-btn, .btn, .k-btn, .e-btn, .pc-btn, .cs-btn { min-height: 40px; }
  [data-flow-nav] a, .flow-nav a, .flow-nav-item, .flow-3508-sidebar a { min-height: 44px; display: flex; align-items: center; }

  /* -- shared page chrome: let title rows / toolbars / action rows wrap -- */
  .item-top, .transaction-top, .database-top, .mission-hero, .atlas-customers-hero,
  .item-toolbar, .flow-list-toolbar, .actions, .transaction-hero-actions, .mission-hero-actions,
  .transaction-actions, .item-actions {
    flex-wrap: wrap !important;
  }
  .item-top > .actions, .transaction-top > .actions { width: 100%; }
  .item-top h1, .transaction-top h1, .mission-hero h1, .atlas-customers-hero h1 { font-size: 22px !important; line-height: 1.2 !important; }

  /* -- KPI / metric / card grids => responsive auto-fit -- */
  .atlas-customer-metrics, .transaction-metric-row, .transaction-hero, .mission-metrics,
  .metric-row, .kpi-row, .grid-7, .grid-6, .grid-5, .grid-4, .grid-3,
  .flow-transaction-directory, .flow-directory-grid, .mission-tiles, .mission-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 10px !important;
  }
  .span-2, .span-3, .span-4, .span-5, .span-6 { grid-column: auto !important; }

  /* -- panels/cards go fluid full-width -- */
  .card, .atlas-panel, .list-card, .transaction-card, .transaction-builder-card,
  .flow-directory-card, .transaction-panel, .item-cockpit-panel { max-width: 100% !important; }

  /* -- modals / dialogs => near full screen -- */
  .atlas-321-modal-grid, .atlas-324-modal-grid, .atlas-321-customer-modal, .atlas-321-modal,
  .eml-modal-card, .mt-card, .cs-modal-card, .pc-modal, .modal-card, .flow-modal-card {
    width: 96vw !important; max-width: 96vw !important; grid-template-columns: 1fr !important;
    max-height: 92vh !important; overflow: auto !important;
  }

  /* -- dense tables & lists: horizontal-scroll fallback so nothing is cut off -- */
  .flow-list-shell, .item-list, .command-table-wrap, .table-wrap, .flow-table-scroll {
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
  }
  .flow-list-shell .flow-table-head, .flow-list-shell [id$="TableBody"] { min-width: 640px; }
  main table, .flow-page table {
    display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    white-space: nowrap !important; max-width: 100% !important;
  }

  /* -- floating widgets clear the safe area / drawer -- */
  #flowosInstall { bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
}

/* ================================ PHONE (<=640px) ========================= */
@media (max-width: 640px) {
  /* the big inline search is hidden on phones — the ⌘K search button remains */
  html body .flow-header-search { display: none !important; }
  /* trim header link-buttons to the primary action to save room; drawer has the rest */
  .flow-header-actions a.flow-header-btn:not(.primary) { display: none !important; }
  .flow-header-actions .flow-header-btn.primary { padding: 0 12px !important; }

  .item-top h1, .transaction-top h1, .mission-hero h1, .atlas-customers-hero h1 { font-size: 19px !important; }
  .atlas-customer-metrics, .transaction-metric-row, .transaction-hero, .mission-metrics,
  .metric-row, .kpi-row, .flow-transaction-directory { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important; }

  /* tighten default page padding a touch on the smallest screens */
  html body .flow-page, html body .flow-main, html body main.flow-page {
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }
}

/* -------- Communications inbox: collapse the 6-pane grid to a stack -------- */
@media (max-width: 1024px) {
  #emlGrid, #emlGrid.eml-rail-collapsed, #emlGrid.eml-ctx-collapsed, #emlGrid.eml-rail-collapsed.eml-ctx-collapsed {
    grid-template-columns: 1fr !important; height: auto !important; min-height: 0 !important; gap: 12px !important;
  }
  #emlGrid .eml-resizer, #emlGrid .eml-reopen, #emlRailCollapse, #emlGrid .eml-ctxpane { display: none !important; }
  #emlGrid > .eml-pane, #emlRailPane, #emlListPane, #emlReaderPane { width: auto !important; max-width: 100% !important; }
  #emlRailPane { max-height: 44vh; overflow: auto; }
  #emlListPane { max-height: 70vh; overflow: auto; }
  #emlReaderPane { min-height: 74vh; }
  /* the reader's own 3-pane sub-layout (conversation | reply | context) also stacks */
  .eml-read-cols, .eml-reader-grid { grid-template-columns: 1fr !important; }
  /* inbox top toolbar wraps instead of overflowing */
  .eml-top, .eml-actions { flex-wrap: wrap !important; }
}

/* -------- customer portal (top-nav shell) small-screen polish -------- */
@media (max-width: 720px) {
  .topbar .wrap.topbar-row { flex-wrap: wrap !important; gap: 8px !important; }
  .topbar .tb-search { order: 3; width: 100% !important; }
  .topbar .tb-search input { font-size: 16px !important; width: 100% !important; }
  .nav .wrap.nav-row { overflow-x: auto !important; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; white-space: nowrap; }
}