/* Mobile only */
@media (max-width: 900px){

  /* Prevent any page-level horizontal overflow */
  body.jr-memory-page,
  body.jr-memory-page #content,
  body.jr-memory-page #page,
  body.jr-memory-page #content-wrap,
  body.jr-memory-page .content-wrap,
  body.jr-memory-page .entry-content,
  body.jr-memory-page .entry-content-wrap,
  body.jr-memory-page #bp-memory-form-wrapper,
  body.jr-memory-page #memory-forms-container,
  body.jr-memory-page #memory-forms-container .memory-entry{
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* The immediate table area should not overflow the container */
  body.jr-memory-page #bp-memory-form-wrapper .memory-entry .table-container{
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important; /* key: stop bleed outside container */
    box-sizing: border-box !important;
  }

  /* Use jr-mt-scroll as the ONLY horizontal scroller */
  body.jr-memory-page #bp-memory-form-wrapper .memory-entry .table-container .jr-mt-scroll{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Ensure the table can be wider than the viewport so scrolling works,
     while still filling the available width at minimum. */
  body.jr-memory-page #bp-memory-form-wrapper .memory-entry .table-container .jr-mt-scroll > table.jr-mt-freeze2-target{
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    table-layout: auto !important;
  }

  /* If any legacy CSS forced overflow visible on table containers, defeat it */
  body.jr-memory-page #bp-memory-form-wrapper .memory-entry,
  body.jr-memory-page #bp-memory-form-wrapper .memory-entry .table-container,
  body.jr-memory-page #bp-memory-form-wrapper .memory-entry .entry-content,
  body.jr-memory-page #bp-memory-form-wrapper .memory-entry .entry-content *{
    overflow-x: clip !important;
  }

  /* But keep the actual scroller functional */
  body.jr-memory-page #bp-memory-form-wrapper .memory-entry .table-container .jr-mt-scroll{
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  /* Avoid sticky columns creating a visual seam */
  body.jr-memory-page #bp-memory-form-wrapper .memory-entry .table-container .jr-mt-scroll > table.jr-mt-freeze2-target th,
  body.jr-memory-page #bp-memory-form-wrapper .memory-entry .table-container .jr-mt-scroll > table.jr-mt-freeze2-target td{
    background-clip: padding-box !important;
  }
}