/* ngel-mobile-fix.css — phone-width overrides for the built storefront SPA.
   The app styles elements inline (no classes), so rules target the exact
   inline-style patterns and need !important to win over them. Applied only
   below 700px; tablets and desktops are untouched. Remove this file once
   the React source is recovered and made properly responsive. */
@media (max-width: 700px) {

  /* ── storefront top bar: wrap into rows instead of forcing 615px ── */
  #root header div[style*="height: 66px"] {
    flex-wrap: wrap !important;
    height: auto !important;
    padding: 8px 12px !important;
    row-gap: 6px !important;
    gap: 8px !important;
  }
  /* search box drops to its own full-width row */
  #root header div[style*="height: 66px"] form {
    order: 9;
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  /* right-side cluster (account/cart/sign-in) may shrink and wrap */
  #root header div[style*="margin-left: auto"][style*="flex-shrink: 0"] {
    flex-shrink: 1 !important;
    flex-wrap: wrap !important;
    justify-content: flex-end;
    gap: 4px !important;
    min-width: 0 !important;
  }
  #root header div[style*="margin-left: auto"] button {
    padding: 6px 9px !important;
    font-size: 12px !important;
  }

  /* ── slim page-top bars (auth pages): wrap instead of overflowing ── */
  #root div[style*="height: 56px"][style*="flex-shrink: 0"] {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 44px;
    padding: 8px 12px !important;
    row-gap: 4px !important;
  }

  /* ── footer link columns: 4-across becomes 2-across ── */
  #root footer div[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }

  /* ── fixed-width auth panels (customer 480px, supplier 420px) go full width ── */
  #root div[style*="width: 480px"][style*="flex-shrink: 0"],
  #root div[style*="width: 420px"][style*="flex-shrink: 0"] {
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
    padding: 28px 20px !important;
  }
  /* the two-panel auth layout stacks vertically */
  #root div[style*="min-height: 100vh"][style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  /* ── pill/tab strips scroll within themselves instead of pushing the page ── */
  #root div[style*="display: inline-flex"] {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  /* ── main content flex layouts (filters + grid) stack ── */
  #root main div[style*="display: flex"] {
    flex-wrap: wrap !important;
  }
  #root main div[style*="display: flex"] > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* sidebar + content rows stack vertically instead of sharing 375px */
  #root main div[style*="display: flex"][style*="align-items: flex-start"] > * {
    flex: 1 1 100% !important;
  }
  /* product/card grids anywhere: exactly two shrinkable columns on phones
     (the more specific footer rule above still wins for footer link columns) */
  #root div[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── form cards with wide side padding (register page holds a fixed-width
        reCAPTCHA, so the 36px paddings push past the viewport) ── */
  #root div[style*="padding: 30px 36px"],
  #root div[style*="padding: 28px 36px"] {
    padding: 20px 14px !important;
  }

  /* ── generic guards ── */
  #root img { max-width: 100%; height: auto; }
  /* inline min-widths of 200px+ are desktop assumptions — drop them on phones */
  #root [style*="min-width: 2"],
  #root [style*="min-width: 3"],
  #root [style*="min-width: 4"],
  #root [style*="min-width: 5"] { min-width: 0 !important; }
  /* data tables scroll sideways inside their own box */
  #root table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }
}

/* ═══ ADMIN / STAFF PORTAL (class-based layout) — phone fixes ═══ */
@media (max-width: 768px) {
  /* top bar: fixed 430px search box shrinks, meta text hides */
  .topbar { padding: 0 12px !important; gap: 8px !important; height: 60px !important; }
  .topbar-left { flex: 1 1 auto; min-width: 0; }
  .search-box { width: auto !important; flex: 1 1 120px !important; min-width: 0 !important; height: 40px !important; }
  .topbar-right { gap: 8px !important; }
  .topbar-date { display: none !important; }
  .profile-info, .profile-arrow { display: none !important; }  /* avatar stays */
  .profile-dropdown { padding: 4px !important; gap: 0 !important; }

  .admin-content, .app-content { padding: 16px 12px !important; }
  .page-title { font-size: 20px !important; }

  /* inline-styled module tab strips (Procurement, Warehouse, …) scroll sideways */
  #root div:has(> button[style*="border-radius: 10px 10px"]) {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }
  #root div:has(> button[style*="border-radius: 10px 10px"]) > button { flex: 0 0 auto; }

  /* ── mobile nav: the app hides .sidebar under 768px with no way to open it.
        A floating ☰ button (injected by ngel-mobile-nav in index.html) toggles it. ── */
  .ngel-mnav-btn {
    position: fixed; bottom: 18px; left: 14px; z-index: 1190;
    width: 52px; height: 52px; border-radius: 50%;
    background: #0b1220; color: #fff; border: 1px solid rgba(255,255,255,.15);
    font-size: 22px; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,.35); cursor: pointer;
  }
  body.ngel-sb-open .sidebar {
    display: flex !important;
    position: fixed !important; left: 0; top: 0;
    width: min(290px, 82vw) !important; height: 100vh !important;
    z-index: 1200 !important; overflow-y: auto !important;
  }
  .ngel-mnav-backdrop {
    display: none;
  }
  body.ngel-sb-open .ngel-mnav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1195;
    background: rgba(0,0,0,.45);
  }
}
/* the hamburger and backdrop exist only for small screens */
@media (min-width: 769px) {
  .ngel-mnav-btn, .ngel-mnav-backdrop { display: none !important; }
}

/* ultra-narrow phones: Google reCAPTCHA is a fixed 304px iframe — scale it */
@media (max-width: 350px) {
  #root div[style*="width: 304px"] {
    transform: scale(0.88);
    transform-origin: 0 0;
  }
}