/* Mobile scroll grids: keep the identifying column readable without hiding the amounts. */
@media (max-width: 767.98px) {
  /* Report pages must never hide columns. Older master-list CSS removes fixed
     column numbers on small screens; this route-level rule restores the full
     report and lets the user scroll to every figure. */
  body.report-grid-page main .product-table-wrap,
  body.report-grid-page main .flow-table-wrap,
  body.report-grid-page main .master-report-table,
  body.report-grid-page main .table-responsive {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
  }

  body.report-grid-page main table {
    width: max-content !important;
    min-width: 100% !important;
    table-layout: auto !important;
    font-size: .62rem !important;
  }

  body.report-grid-page main table th,
  body.report-grid-page main table td,
  body.report-grid-page main .product-table th,
  body.report-grid-page main .product-table td,
  body.report-grid-page main .inventory-table th,
  body.report-grid-page main .inventory-table td {
    display: table-cell !important;
    visibility: visible !important;
    padding: .34rem .38rem !important;
    min-width: 4.8rem;
    max-width: 9rem;
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.16;
    vertical-align: middle;
  }

  body.report-grid-page main table th.number,
  body.report-grid-page main table td.number {
    min-width: 5.8rem;
    white-space: nowrap !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums;
  }

  body.report-grid-page main table th:first-child,
  body.report-grid-page main table td:first-child {
    width: 5.6rem !important;
    min-width: 5.6rem !important;
    max-width: 5.6rem !important;
    position: static !important;
    left: auto !important;
    font-size: .6rem !important;
  }

  body.report-grid-page main table td strong,
  body.report-grid-page main table td a {
    font-size: .65rem;
    line-height: 1.14;
    overflow-wrap: anywhere;
  }

  body.report-grid-page main table td small {
    display: block;
    font-size: .54rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
  }

  body.report-grid-page main .party-summary-table table th:first-child,
  body.report-grid-page main .party-summary-table table td:first-child {
    width: 2.8rem !important;
    min-width: 2.8rem !important;
    max-width: 2.8rem !important;
  }

  body.report-grid-page main .party-summary-table table th:nth-child(2),
  body.report-grid-page main .party-summary-table table td:nth-child(2) {
    width: 8.2rem !important;
    min-width: 8.2rem !important;
    max-width: 8.2rem !important;
    position: static !important;
    left: auto !important;
  }

  main .product-table-wrap .product-table th:first-child,
  main .product-table-wrap .product-table td:first-child,
  main .flow-table-wrap .flow-table th:first-child,
  main .flow-table-wrap .flow-table td:first-child,
  main .return-table table th:first-child,
  main .return-table table td:first-child,
  main .settlement-table table th:first-child,
  main .settlement-table table td:first-child {
    width: 7.5rem !important;
    min-width: 7.5rem !important;
    max-width: 7.5rem !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  main .product-table-wrap .product-table th:first-child,
  main .flow-table-wrap .flow-table th:first-child,
  main .return-table table th:first-child,
  main .settlement-table table th:first-child {
    font-size: .62rem !important;
    line-height: 1.12;
  }

  main .product-table-wrap .product-table td:first-child,
  main .flow-table-wrap .flow-table td:first-child,
  main .return-table table td:first-child,
  main .settlement-table table td:first-child {
    font-size: .68rem !important;
    line-height: 1.18;
  }

  main .product-table-wrap .product-table td:first-child strong,
  main .flow-table-wrap .flow-table td:first-child strong,
  main .return-table table td:first-child strong,
  main .settlement-table table td:first-child strong {
    font-size: .71rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  main .product-table-wrap .product-table td:first-child small,
  main .flow-table-wrap .flow-table td:first-child small,
  main .return-table table td:first-child small,
  main .settlement-table table td:first-child small {
    font-size: .60rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
  }

  /* Recent Payments intentionally uses a short date first column. */
  main .recent-payments .product-table th:first-child,
  main .recent-payments .product-table td:first-child {
    width: 4.4rem !important;
    min-width: 4.4rem !important;
    max-width: 4.4rem !important;
    white-space: nowrap !important;
  }
}