/*
 * Grids (frmGrid / frmAdvancedGrid) - test layer, candidate to be migrated into wfEngine.
 * Loaded from renderer.php only when PJ_GRID_MOBILE_SCROLL / PJ_GRID_STICKY_ACTIONS are defined in config.php.
 * Each define puts a class on <html> which gates the rules below:
 *   html.pjGridScroll        - on phones every grid scrolls horizontally inside itself, the page does not get wider
 *   html.pjGridStickyActions - the action buttons column (edit/copy/delete, header Add button) is pinned to the right edge
 */

/* ---------- inner scroll (phones only) ---------- */
@media (max-width: 768px) {
  /* the table itself becomes the scroll box: display:block wraps the rows into an anonymous table,
     so no extra markup is needed. fit-content + margin:auto keeps narrow grids their natural width (centered). */
  html.pjGridScroll table.engine-grid {
    display: block;
    width: fit-content !important;
    max-width: 100%;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  /* parents of the grid must not stretch with it */
  html.pjGridScroll .table-holder,
  html.pjGridScroll .gridForm,
  html.pjGridScroll form:has(> table.engine-grid) {
    max-width: 100%;
    min-width: 0;
  }
  /* long texts wrap less aggressively than desktop nowrap would allow */
  html.pjGridScroll table.engine-grid .gridCell,
  html.pjGridScroll table.engine-grid .gridHeaderCell {
    padding: 4px 5px;
    font-size: 12px;   /* desktop is 10pt (~13.3px) */
  }
  html.pjGridScroll table.engine-grid .gridHeaderCell {
    min-width: 0;
  }
}

/* ---------- action column pinned on the right ----------
   Only for grids that really have the buttons column (td.gridCellButtons = last cell when editColumnVisible).
   The last cell of every row (header, filters, data, summary) is sticky so the column stays aligned.
   Sticks to the grid's own scroll box on phones, to the window when a desktop page scrolls sideways. */
html.pjGridStickyActions table.engine-grid:has(td.gridCellButtons) > * > tr > :last-child:not([colspan]) {
  position: sticky;
  right: 0;
  z-index: 2;
  /* border-collapse:collapse does not move borders with a sticky cell - draw the separator as a shadow */
  box-shadow: inset 1px 0 0 #9E9E9E;
}
/* cells keep their own opaque backgrounds (.gridCell white, highlighted yellow, header gradient) - nothing shows through */
html.pjGridStickyActions table.engine-grid:has(td.gridCellButtons) > thead > tr > th:last-child {
  z-index: 3;
}

@media (max-width: 768px) {
  /* shade on the pinned column so it is clear rows continue underneath */
  html.pjGridStickyActions table.engine-grid:has(td.gridCellButtons) > * > tr > :last-child:not([colspan]) {
    box-shadow: inset 1px 0 0 #9E9E9E, -3px 0 4px -2px rgba(0, 0, 0, 0.25);
  }
  /* compact buttons in the pinned column */
  html.pjGridStickyActions table.engine-grid td.gridCellButtons {
    padding: 2px;
  }
  html.pjGridStickyActions table.engine-grid td.gridCellButtons .gridActionButton {
    margin: 1px;
    padding: 4px 6px;
  }
  /* "Add" in the header: smaller than the desktop custom.css size */
  html.pjGridStickyActions table.engine-grid .gridHeaderCellLast .gridActionButton {
    font-size: 13px;
    padding: 4px 8px;
  }
}

/* ---------- compact paginator (phones only) ----------
   frmPaginator::printPaginator() markup (old style, not noStyles):
     div.tcenter > div.paginator.navigation > div.navigationbgright
       [span.paginatorTitle] a.first a.prev a.next a.last
       span.page (strong "Page" + input + "of N")  span.borderline
       span > strong ("Visible Rows:" + select)    span.borderline
       span > strong ("Number Of Rows: N")
   Compact: the 4 links become arrow-only buttons, "Page" / "Visible Rows" labels disappear,
   the box can't be wider than the screen and wraps to a second line when needed. */
@media (max-width: 768px) {
  html.pjCompactPaginator .paginator.navigation {
    display: block;
    max-width: 100%;
    height: auto !important;
    padding: 2px 4px !important;
    box-sizing: border-box;
    margin: 4px auto;
  }
  html.pjCompactPaginator .paginator.navigation .navigationbgright {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: 2px;
    height: auto !important;
    padding-left: 0 !important;
    white-space: normal;
  }
  /* separators only waste room once things wrap */
  html.pjCompactPaginator .paginator.navigation span.borderline {
    display: none;
  }
  html.pjCompactPaginator .paginator.navigation span {
    padding: 0 4px;
    font-size: 12px;
  }

  /* arrows only: hide the First/Previous/Next/Last text, keep the arrow images, bigger touch target */
  html.pjCompactPaginator .paginator.navigation a.first,
  html.pjCompactPaginator .paginator.navigation a.prev,
  html.pjCompactPaginator .paginator.navigation a.next,
  html.pjCompactPaginator .paginator.navigation a.last {
    font-size: 0;
    width: 30px;
    height: 26px;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
    background-position: center center !important;
    border: none !important;
  }
  /* page: drop the "Page" label, keep "[ 3 ] of 12" */
  html.pjCompactPaginator .paginator.navigation span.page {
    border: none;
  }
  html.pjCompactPaginator .paginator.navigation span.page > strong:first-child {
    display: none;
  }
  html.pjCompactPaginator .paginator.navigation span.page input {
    font-size: 14px;   /* >= 14px keeps iOS from zooming in on focus (with text-size-adjust in mobile.css) */
    height: 22px;
    padding: 0 2px;
    box-sizing: border-box;
  }

  /* rows per page: drop "Visible Rows:", keep the select */
  html.pjCompactPaginator .paginator.navigation span.page + span.borderline + span > strong {
    font-size: 0;
  }
  html.pjCompactPaginator .paginator.navigation span.page + span.borderline + span > strong select {
    font-size: 14px;
    height: 22px;
  }

  html.pjCompactPaginator .paginator.navigation .paginatorTitle {
    flex-basis: 100%;
    text-align: center;
  }
  html.pjCompactPaginator .paginator .paginator-right-content,
  html.pjCompactPaginator .paginator .paginator-buttons-wrapper {
    flex-basis: 100%;
    text-align: center;
  }
}