for inline-search pages). A flex column inside the non-scrolling .app-content — the filter card stays fixed at the top, the grid card grows to fill the rest. */ .list-shell { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--space-3); } .list-shell > .filter-card { flex: 0 0 auto; } /* Grid card — wraps the QDataGrid for modern presentation. The paginator row is lifted out of the scrolling table into .grid-card__bar by the relocation script in footer_modern.inc.php, so the title bar is sized to the CARD (the visible content area) and stays put when the results table scrolls. Inside .list-shell the card grows to fill the height; only .grid-card__scroll scrolls. */ .grid-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; /* clip rounded corners; scrolling lives on __scroll */ } .list-shell > .grid-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* Title section: holds the relocated paginator row's inner table, which lays out the result-count (left) and the paginator (right) across its full width. */ .grid-card__bar { flex: 0 0 auto; padding: var(--space-3) var(--space-4); /* Match the bulk-actions bar / column header (var(--surface)). */ background: var(--surface); border-bottom: 1px solid var(--border); font-size: var(--text-xs); color: var(--text-muted); /* Lay the relocated paginator table and the injected rows-per-page selector on one line. */ display: flex; align-items: center; gap: var(--space-4); } .grid-card__bar:empty { display: none; } /* The relocated paginator table fills the bar: the count cell sits left, the paginator right; the Density/Rows selectors follow on the far right. Drop the inner table's hardcoded 50/50 cell widths so the paginator gets the room it needs (otherwise "Next" wraps) while the short count cell stays left. */ .grid-card__bar > table { flex: 1 1 auto; } .grid-card__bar table td { width: auto !important; } /* Density selector (injected by footer_modern.inc.php). */ .density { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.02em; } .density select { font: inherit; padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); } /* Hamburger mode: keep the count, paginator and density control on one line (the density dropdown is label-less and rows-per-page is gone, so they fit). Keep the count on one line, and allow a graceful wrap as a fallback on very tight widths. */ @media (max-width: 960px) { .grid-card__bar { flex-wrap: wrap; row-gap: var(--space-2); column-gap: var(--space-3); } /* Override the inner table's inline width:100% so its flex-basis is its content width (not the whole bar) — that lets the density control share the line instead of being pushed onto a second row. */ .grid-card__bar > table { width: auto !important; } .grid-card__bar table td { white-space: nowrap; } } /* Phones: also compact the paginator to Prev / current page / Next so the numbered links don't wrap in the narrow row. */ @media (max-width: 520px) { .grid-card__bar .paginator .page, .grid-card__bar .paginator .ellipsis { display: none; } } /* Results table scrolls (both axes) inside the card, filling the leftover height. Styled scrollbars forced visible (no overlay auto-hide). */ .grid-card__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--border-strong) var(--surface-alt); } .grid-card__scroll::-webkit-scrollbar { width: 12px; height: 12px; } .grid-card__scroll::-webkit-scrollbar-track { background: var(--surface-alt); } .grid-card__scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border: 3px solid var(--surface-alt); border-radius: var(--radius-lg); } .grid-card__scroll::-webkit-scrollbar-thumb:hover { background: var(--slate-400); } .grid-card .datagrid { /* width:auto so the table sizes to its content instead of stretching to fill the card — columns (and the header row) only take the width they need, packed to the left with whitespace on the right. Wider-than-card tables still scroll horizontally via .grid-card__scroll. */ width: auto; border: none; border-radius: 0; /* Override the base .datagrid's overflow:hidden: an ancestor with overflow!=visible between the sticky and .grid-card__scroll would capture the sticky context and let the header scroll away. */ overflow: visible; } /* Keep the column headers pinned while the results scroll vertically. Sticky is applied to the header CELLS, not the : position:sticky on a table row is buggy across browsers — the row shifts by a pixel at the scroll extremes and flickers during hover repaints — whereas sticky cells are rock-solid. Only the header row uses (data cells are ), so this targets exactly the header. A solid background + bottom divider stop rows showing through as they scroll underneath. */ .grid-card__scroll .datagrid th { position: sticky; top: 0; z-index: 2; background: var(--header-bg); box-shadow: inset 0 -1px 0 var(--border); } /* The datagrids set legacy inline row styles in PHP — hardcoded black/white text, an #EFEFEF zebra, and a fixed header colour — which override the theme and ignore dark mode. Neutralize them so every grid (result lists AND the child grids embedded in edit pages) follows the tokens: clean surface rows, subtle .dtg_column dividers, and a hover state. The header/column rules only match .dtg_* cells, so legacy record-form tables are unaffected. */ .datagrid tr { background-color: transparent !important; color: var(--text) !important; } .datagrid .dtg_header { background-color: var(--surface) !important; color: var(--text) !important; } .datagrid .dtg_column { font-size: var(--text-sm); color: var(--text); } /* Zebra striping: tint every other result row so the eye can track a row across the page. Applied to .dtg_column cells (not the , which is forced transparent !important above), mirroring the hover rule. Kept before the hover rule so hover wins the equal-specificity tie and still highlights striped rows. The header row is untouched — its cells are .dtg_header. */ .datagrid tr:nth-child(even) .dtg_column { background-color: var(--row-alt); } .datagrid tr:hover .dtg_column { background-color: var(--row-hover); } /* Column-selection tool: the "…" button in the grid header + its dropdown. (Replaces the old hardcoded blue/grey inline styles.) */ .column-toggle-btn { display: inline-block; cursor: pointer; padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--text-muted); font-weight: var(--weight-bold); letter-spacing: 1px; line-height: 1.4; } .column-toggle-btn:hover { background: var(--surface-alt); color: var(--text); } .column-toggle-menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-2); font-size: var(--text-sm); color: var(--text); z-index: 60; /* The menu is position:fixed (set in datagrid_column_toggle.js) so a long column list can't scroll with the page — cap its height and scroll inside. */ max-height: 75vh; overflow-y: auto; } .column-toggle-head { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: var(--space-1) var(--space-2) var(--space-2); } .column-toggle-item { display: block; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); cursor: pointer; color: var(--text); } .column-toggle-item:hover { background: var(--surface-alt); } .column-toggle-export { margin-top: var(--space-1); padding-top: var(--space-2); border-top: 1px solid var(--border); color: var(--link); } /* Bulk-actions bar: fixed at the bottom of the content area, always visible. */ .toolbar--bulk { flex: 0 0 auto; margin-top: var(--space-3); } /* A toolbar inside the list shell (e.g. admin quick-add) is spaced by the shell's gap, so drop its own top margin. */ .list-shell > .toolbar { margin-top: 0; } /* Generic vertical scroller for non-list modern pages (settings, reports) whose content may exceed the viewport — wraps the body so it scrolls inside the fixed .app-content instead of being clipped. */ .page-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* Below the full-desktop width the sidebar becomes an off-canvas drawer opened by the hamburger in a sticky top bar; the drawer keeps the FULL navigation (labels + sub-nav). There is NO intermediate icon-only/compact state — the menu is either the full sidebar (above this width) or the hamburger drawer (below it). */ @media (max-width: 960px) { body.app { flex-direction: column; } .app-topbar { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; padding: var(--space-2) var(--space-3); background: var(--sidebar-bg); color: #fff; border-bottom: 1px solid var(--sidebar-edge); } .app-topbar__brand { flex: 1; min-width: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-hamburger { color: #fff; } /* The screen title lives in the top bar now, so drop the in-page page-header title + subtitle to save vertical space. */ .page-header__titles { display: none; } .page-header:empty, .page-header:not(:has(.page-header__actions)) { display: none; margin: 0; } /* On LIST pages, also drop the whole header — its only actions are navigation links (Import / + New …) that are already in the hamburger nav drawer — so the results grid gets that vertical room back. Detail/edit headers (Save, Edit, Delete …) are kept: their form has no .list-shell. */ form:has(.list-shell) > .page-header { display: none; } /* Bulk-action bar (Mass Edit / Mass Delete) isn't useful on touch/mobile — hide it in the hamburger layout; it stays on the full-sidebar layout. */ .toolbar--bulk { display: none; } /* On phones the filters stack to one tall column; cap tighter so the results stay reachable and the panel scrolls internally. */ .filter-card.is-open .filter-advanced { max-height: 50vh; } /* Drawer: fixed, off-canvas, slides in. Restores the full vertical sidebar. Width matches the full-sidebar layout (184px) so the menu is the same size in both layouts; max-width is a safety cap for ultra-narrow screens only. */ .app-sidebar { position: fixed; top: 0; left: 0; width: 184px; max-width: 84vw; height: 100vh; height: 100dvh; flex-basis: auto; z-index: 60; overflow-y: auto; transform: translateX(-100%); transition: transform 0.25s ease; will-change: transform; } body.nav-open .app-sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); } /* Full navigation inside the drawer (labels + sub-nav + user details). */ .app-nav__label, .app-sidebar__wordmark, .app-subnav, .app-user__signout, .app-user__meta { display: revert; } .app-sidebar__brand { padding: var(--space-4) var(--space-5); justify-content: flex-start; } .app-sidebar__logo { max-width: none; } .app-nav__link { justify-content: flex-start; padding: var(--space-2) var(--space-3); } .app-sidebar__footer { padding: var(--space-4) var(--space-5); justify-content: flex-start; } .app-user { justify-content: flex-start; } .app-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(2, 6, 23, 0.55); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } body.nav-open .app-backdrop { opacity: 1; visibility: visible; } /* Tighter edge padding + a smaller gap between the search panel and the results box so they use more of the screen on phones. */ .app-content { padding: var(--space-2); } .list-shell { gap: var(--space-2); } .page-header { flex-direction: column; align-items: stretch; } /* Asset-history rows: let the summary text wrap within the card instead of overflowing. On desktop `.summary` is a forced one-liner (white-space: nowrap) and `.transaction_data` is a shrink-to-fit float, both of which overflow a narrow screen. */ .transaction_data { float: none; width: auto; } .summary { white-space: normal; } }