/* ============================================================
   Bitam — Responsive overlay (Iteration 0.6)
   Self-contained: targets the prototype's stable structural hooks
   (#root aside / header / main, .tbl, inline grids) so the ~40
   prototype files stay untouched. Every rule lives inside a
   max-width query, so desktop (>1024px) is byte-for-byte unchanged.
   ============================================================ */

/* Injected by responsive.jsx — hidden until a sidebar exists on a small screen */
#bitam-burger {
  position: fixed; top: 13px; left: 12px; width: 40px; height: 40px;
  display: none; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--border); background: #fff;
  color: var(--text-strong); box-shadow: var(--shadow-sm); z-index: 1001;
}
#bitam-burger:active { transform: translateY(.5px); }
#bitam-scrim { position: fixed; inset: 0; background: rgba(16,24,40,.45); z-index: 999; display: none; }

/* ---------- ≤1024: tablet — denser grids, tighter content ---------- */
@media (max-width: 1024px) {
  #root main { padding: 22px 16px 40px !important; }
  #root [style*="repeat(4,"] { grid-template-columns: repeat(2, 1fr) !important; }
  #root [style*="repeat(3,"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- ≤900: sidebar becomes an off-canvas drawer ---------- */
@media (max-width: 900px) {
  #root aside {
    position: fixed !important; top: 0 !important; left: 0 !important;
    height: 100dvh !important; width: 248px !important;
    transform: translateX(-100%); transition: transform .25s ease !important;
    z-index: 1000 !important; box-shadow: var(--shadow-lg);
  }
  body.nav-open #root aside { transform: none; }
  body.has-sidebar #bitam-burger { display: inline-flex; }
  body.nav-open #bitam-scrim { display: block; }
  #root header { padding-left: 60px !important; }
}

/* ---------- ≤760: mobile — single column, scrolling tables ---------- */
@media (max-width: 760px) {
  /* never let the page scroll sideways */
  html, body { overflow-x: hidden; }

  #root [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  #root main { padding: 18px 14px 36px !important; max-width: 100vw; }

  /* wide tables scroll horizontally rather than widen the page */
  #root main table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

  /* topbar: hide the search; let any remaining wide widget (e.g. the seller
     quota chip) scroll INSIDE the bar so it can't force the page wider */
  #root header { padding: 0 12px 0 56px !important; gap: 8px !important; overflow-x: auto; }
  #root header div:has(> input) { display: none !important; }

  /* shrink the floating demo switcher so it fits a phone */
  #bitam-switcher { left: 10px !important; bottom: 10px !important; transform: scale(.9); transform-origin: left bottom; }
}

@media (max-width: 380px) {
  #bitam-switcher { transform: scale(.82); transform-origin: left bottom; }
}