/* ═══════════════════════════════════════════════════════════════════════
   ZEROONE HQ — RESPONSIVE / MOBILE LAYER
   Self-contained mobile adaptation for the HQ platform. Kept OUT of the
   generated home.html/login.html so it survives any future re-export from
   the design tool — home.html only gains a <link> + <script> include.

   IMPORTANT — why this file is class-light:
   The HQ shell is hydrated by a proprietary runtime that OWNS the DOM and
   re-creates subtrees on re-render, wiping any class we add to those nodes.
   So the drawer mechanics must NOT depend on injected classes living on
   runtime nodes. Instead we:
     • target the shell structurally — the runtime mounts into a stable
       `#dc-root`, there is exactly one <aside> (the sidebar), and the main
       column is its next sibling (`#dc-root aside + div`);
     • hold the open/closed state as a class on <html>, which the runtime
       never touches;
     • float the hamburger + backdrop on <body>, outside <x-dc>, so the
       runtime can't reconcile them away.
   A stylesheet !important beats a non-important inline style, so these
   rules win over the runtime's inline desktop styles.

   Breakpoint: ≤768px = phone / tablet-portrait.  Desktop is untouched.
   ═══════════════════════════════════════════════════════════════════════ */

/* Injected chrome is hidden on desktop by default. */
.hq-burger, .hq-backdrop { display: none; }

@media (max-width: 768px) {

  /* ── Sidebar → off-canvas drawer (class-free: the app's only <aside>) ── */
  #dc-root aside {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    width: min(86vw, 320px) !important;
    max-width: 86vw !important;
    min-width: 0 !important;
    transform: translateX(-100%) !important;
    transition: transform .28s cubic-bezier(.16, 1, .3, 1) !important;
    z-index: 400 !important;
    box-shadow: 0 24px 60px -12px rgba(25, 25, 36, .35);
    border-right: 1px solid rgba(25, 25, 36, .08) !important;
    will-change: transform;
  }
  html.hq-nav-open #dc-root aside { transform: translateX(0) !important; }

  /* Kill the desktop drag-to-resize grip inside the drawer. */
  #dc-root aside .rz-grip { display: none !important; }

  /* ── Main column: the aside is now out of flow, so the sibling column
        already fills the width. Just guarantee it can shrink. ─────────── */
  #dc-root aside + div { min-width: 0 !important; width: 100% !important; }

  /* Reserve space in the app header for the floating hamburger. */
  #dc-root aside + div header { padding-left: 52px !important; }

  /* Let the breadcrumb trail scroll horizontally instead of overflowing. */
  #dc-root aside + div header > nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #dc-root aside + div header > nav::-webkit-scrollbar { display: none; }

  /* ── Content: collapse runtime-injected multi-column grids to one column.
        auto-fit/minmax grids already reflow; this catches fixed repeat(N).
        Scoped to the main column so the sidebar is untouched.

        EXCEPT inside a data grid. A record list is a table: its header row and
        its data rows are separate grids that must keep the SAME column tracks
        or a cell no longer lines up under its heading. Collapsing them to 1fr
        turns a customer row into seven unlabelled stacked values. Those scroll
        horizontally instead — see .hq-datagrid below. ─────────────────── */
  #dc-root aside + div :not(.hq-datagrid) > [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Record lists: scroll sideways, keep the column alignment. ───────── */
  #dc-root aside + div .hq-datagrid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Wide enough that every column keeps its full value. At 860px the status
     badges still ellipsised to "cust…", which defeats the point of showing
     them; 1100px clears the widest column set the registry defines. */
  #dc-root aside + div .hq-datagrid > div {
    min-width: 1100px;
  }

  /* ── Hamburger — fixed, floats in the header's top-left, immune to the
        runtime re-rendering <x-dc>. ───────────────────────────────────── */
  .hq-burger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 8px;
    left: 8px;
    width: 36px;
    height: 36px;
    border: 1px solid #EAE8E2;
    border-radius: 10px;
    background: #fff;
    color: #191924;
    cursor: pointer;
    z-index: 360;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 2px rgba(25, 25, 36, .04);
  }
  .hq-burger:active { background: #F3F1EC; }

  /* ── Backdrop ────────────────────────────────────────────────────────── */
  .hq-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(25, 25, 36, .42);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
    z-index: 390;
  }
  html.hq-nav-open .hq-backdrop { opacity: 1; visibility: visible; }

  /* ── AI Assistant: a draggable/resizable floating window on desktop
        (size/pos from runtime state). On phones make it a full-screen
        takeover so nothing is clipped off the right edge. ─────────────── */
  .hq-ai-win {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    z-index: 430 !important;   /* above the nav drawer + backdrop */
  }
  /* Disable the desktop drag/resize affordances inside the takeover. */
  .hq-ai-win [style*="cursor:grab"],
  .hq-ai-win [style*="cursor: grab"] { cursor: default !important; }

  /* Anything explicitly marked desktop-only during QA. */
  .hq-hide-mobile { display: none !important; }
}
