+ `display: contents` (the voucher pattern)
sidesteps both: the browser auto-measures and reserves the correct space
for whatever the chrome actually renders.
── SCREEN vs PRINT ─────────────────────────────────────────────────────────
On screen, every table element gets `display: contents` so the scaffold
layout box evaporates entirely — children of `` become direct children
of ``. Zero impact on existing screen CSS, Alpine, or JS that targets
`.rvg-main > *` / `.atlas-main > *`. `display: contents` is supported in
every browser since 2018; safe and stable.
On print, native table semantics are restored (`display: table` /
`table-header-group` / `table-row-group` / `table-footer-group`). The
running chrome appears, the body flows freely, no overlap is possible.
============================================================================ */
/* ── Screen: scaffold is invisible ──────────────────────────────────────────
`display: contents` strips the table layout box; children phase through
to their grandparent (`.rvg-main` / `.atlas-main`). All existing screen
styling continues to apply to the inner content unchanged. */
.rvg-print-frame,
.rvg-print-frame > thead,
.rvg-print-frame > tbody,
.rvg-print-frame > tfoot,
.rvg-print-frame > thead > tr,
.rvg-print-frame > tbody > tr,
.rvg-print-frame > tfoot > tr,
.rvg-print-frame > thead > tr > td,
.rvg-print-frame > tbody > tr > td,
.rvg-print-frame > tfoot > tr > td {
display: contents;
}
/* The chrome itself (.rvg-print-header / .rvg-print-footer) is hidden on
screen — only visible during print. */
.rvg-print-header,
.rvg-print-footer { display: none; }
@media print {
/* ── @page: simple symmetric margins ──────────────────────────────────
No magic corridors. The print engine reserves chrome space per page
by measuring rendered / — these @page margins are just
the paper-edge breathing room outside that. */
@page { margin: 10mm 10mm 10mm; }
/* Chrome bug #348796223 — RTL print scale offset fix. */
html { direction: ltr !important; }
body { direction: rtl !important; unicode-bidi: isolate; }
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
/* ── Print frame: switch from `display: contents` back to native table
semantics so repeats on every page and reserves
bottom-margin space per page. */
.rvg-print-frame {
display: table !important;
width: 100% !important;
border-collapse: collapse !important;
table-layout: fixed;
}
.rvg-print-frame > thead { display: table-header-group !important; }
.rvg-print-frame > tbody { display: table-row-group !important; }
.rvg-print-frame > tfoot { display: table-footer-group !important; }
.rvg-print-frame > thead > tr,
.rvg-print-frame > tbody > tr,
.rvg-print-frame > tfoot > tr { display: table-row !important; }
.rvg-print-frame > thead > tr > td,
.rvg-print-frame > tbody > tr > td,
.rvg-print-frame > tfoot > tr > td {
display: table-cell !important;
padding: 0 !important;
vertical-align: top;
}
/* ── Header (running — repeats on every printed page) ─────────────────
3-column grid: brand (RTL-start) · title (centre) · meta (RTL-end).
The meta column carries a tiny date/time stamp so the title centre
column never drifts when one side has more content than the other.
A polished accent stripe under the row gives a clean professional
finish without a harsh black border. */
.rvg-print-header {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 14px;
padding: 6px 4mm 10px;
background: #fff;
font-family: inherit;
position: relative;
border-bottom: 1px solid color-mix(in srgb,
var(--atlas-dark-soft, var(--color-accent, #4a3520)) 18%, #fff);
margin-bottom: 8px;
}
.rvg-print-header::after {
/* Accent gradient stripe under the row — the visual signature of
the running header. Token-driven so palette swaps propagate. */
content: '';
position: absolute;
bottom: -1px; left: 0; right: 0;
height: 2px;
background: linear-gradient(to left,
var(--atlas-light, #d4af6f) 0,
var(--atlas-dark-soft, var(--color-accent, #4a3520)) 50%,
var(--atlas-light, #d4af6f) 100%);
opacity: 0.85;
}
/* Brand cluster (RTL-start = visually right). `justify-self: start`
pins it to its column's start edge so it never drifts toward the
title centre. */
.rvg-print-brand {
display: flex;
align-items: center;
gap: 10px;
justify-self: start;
min-width: 0;
}
.rvg-print-header-logo,
.rvg-print-header-logo-fallback {
height: 42px;
width: auto;
max-width: 130px;
object-fit: contain;
display: block;
flex-shrink: 0;
}
.rvg-print-header-logo-fallback {
width: 42px;
text-align: center;
line-height: 42px;
background: var(--atlas-dark-soft, var(--color-accent, #4a3520));
color: #fff;
border-radius: 8px;
font-weight: 700;
font-size: 20px;
}
.rvg-print-brand-text {
line-height: 1.25;
text-align: start;
min-width: 0;
}
.rvg-print-brand-name {
font-size: 13px;
font-weight: 700;
color: var(--color-text, #1a1a1a);
margin: 0;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rvg-print-brand-tagline {
font-size: 9.5px;
color: var(--color-text-muted, #6b6b6b);
margin-top: 2px;
display: block;
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Title (centre column, auto-width — flanking 1fr tracks keep it
geometrically centred). Title + count chip share a baseline. */
.rvg-print-page-title {
display: inline-flex;
align-items: center;
gap: 8px;
justify-self: center;
text-align: center;
font-size: 14px;
font-weight: 700;
color: var(--color-text, #1a1a1a);
line-height: 1.25;
max-width: 100%;
}
.rvg-print-page-title-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.02em;
}
/* Page-count chip — discrete pill anchored next to the title.
Soft accent tint reads as a UI element, not punctuation. */
.rvg-print-page-count {
display: inline-block;
padding: 1px 9px;
background: color-mix(in srgb,
var(--atlas-dark-soft, var(--color-accent, #4a3520)) 11%, #fff);
color: var(--atlas-dark-soft, var(--color-accent, #4a3520));
border-radius: 999px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1.5;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.rvg-print-page-count:empty { display: none; }
/* Meta cluster (RTL-end = visually left). Date + time stacked.
Pinned to column end so title stays geometrically centred. */
.rvg-print-header-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-self: end;
line-height: 1.25;
font-variant-numeric: tabular-nums;
font-size: 10px;
color: var(--color-text-muted, #6b6b6b);
}
.rvg-print-header-date {
font-weight: 700;
color: var(--color-text, #1a1a1a);
letter-spacing: 0.02em;
}
.rvg-print-header-time {
margin-top: 1px;
opacity: 0.75;
}
/* ── Footer (running — repeats on every printed page) ─────────────────
Symmetrical with the header — accent stripe on top instead of bottom.
2-column grid: footer text (RTL-start) · meta (RTL-end). */
.rvg-print-footer {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
padding: 8px 4mm 6px;
background: #fff;
position: relative;
margin-top: 8px;
border-top: 1px solid color-mix(in srgb,
var(--atlas-dark-soft, var(--color-accent, #4a3520)) 18%, #fff);
font-family: inherit;
}
.rvg-print-footer::before {
content: '';
position: absolute;
top: -1px; left: 0; right: 0;
height: 2px;
background: linear-gradient(to left,
var(--atlas-light, #d4af6f) 0,
var(--atlas-dark-soft, var(--color-accent, #4a3520)) 50%,
var(--atlas-light, #d4af6f) 100%);
opacity: 0.75;
}
.rvg-print-footer-text {
font-size: 10px;
color: var(--color-text, #2c2c2c);
font-weight: 500;
line-height: 1.4;
min-width: 0;
text-align: start;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.rvg-print-footer-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 9.5px;
color: var(--color-text-muted, #6b6b6b);
font-variant-numeric: tabular-nums;
line-height: 1.4;
justify-self: end;
}
.rvg-print-footer-user {
color: var(--color-text, #1a1a1a);
font-weight: 700;
}
.rvg-print-footer-handle {
color: var(--color-text-muted, #6b6b6b);
opacity: 0.85;
}
.rvg-print-footer-handle::before {
content: '·';
margin-inline-end: 6px;
color: color-mix(in srgb, var(--color-border, #c4c4c4) 70%, transparent);
font-weight: 400;
}
.rvg-print-footer-stamp {
color: var(--color-text, #1a1a1a);
font-weight: 600;
}
.rvg-print-footer-stamp::before {
content: '·';
margin-inline-end: 6px;
color: color-mix(in srgb, var(--color-border, #c4c4c4) 70%, transparent);
font-weight: 400;
}
}
/* ============================================================================
Print — classic shell chrome strip. The classic dashboard layout uses a
2-column CSS grid (sidebar | main); without an override the sidebar
prints alongside every page. Hide the sidebar + header + toasts + popovers
+ open modals, collapse the grid to a single column, and let `.rvg-main`
take the full width. Atlas shell handles this separately in atlas.css.
============================================================================ */
@media print {
body.revogen-dashboard-page .rvg-sidebar,
body.revogen-dashboard-page .rvg-header,
body.revogen-dashboard-page .rvg-toasts,
body.revogen-dashboard-page .rvg-modal-backdrop,
body.revogen-dashboard-page .rvg-popover,
body.revogen-dashboard-page dialog[open]:not(.rvg-print-header):not(.rvg-print-footer),
body.revogen-dashboard-page [popover]:not(.rvg-print-header):not(.rvg-print-footer) {
display: none !important;
visibility: hidden !important;
}
/* Collapse the dashboard grid so .rvg-main fills the printed page.
Without this the empty sidebar column leaves a blank left/right band
and the main column stays at its (full-viewport - sidebar) width. */
body.revogen-dashboard-page .revogen-dashboard {
display: block !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
grid-template-areas: none !important;
}
body.revogen-dashboard-page .rvg-main {
grid-area: auto !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: #fff !important;
border: none !important;
box-shadow: none !important;
position: static !important;
}
/* Belt-and-braces — sticky elements inside .rvg-main leave ghost offsets
and weird mid-page anchoring during print. Neutralise sticky everywhere
inside the printable pane EXCEPT the print-frame scaffold itself
(whose / need their native table-header-group /
table-footer-group display to repeat on every page).
The scaffold elements carry distinct classes (.rvg-print-frame-head /
.rvg-print-frame-body / .rvg-print-frame-foot) so we can target them
precisely via `:not()` and never accidentally hit a data-table that
happens to live inside a downstream | . */
body.revogen-dashboard-page .rvg-main *[style*="position: sticky"],
body.revogen-dashboard-page .rvg-main .is-sticky,
body.revogen-dashboard-page .rvg-main thead:not(.rvg-print-frame-head),
body.revogen-dashboard-page .rvg-main thead:not(.rvg-print-frame-head) th,
body.revogen-dashboard-page .rvg-main tfoot:not(.rvg-print-frame-foot),
body.revogen-dashboard-page .rvg-main tfoot:not(.rvg-print-frame-foot) tr,
body.revogen-dashboard-page .rvg-main tfoot:not(.rvg-print-frame-foot) td,
body.revogen-dashboard-page .rvg-main tfoot:not(.rvg-print-frame-foot) th {
position: static !important;
bottom: auto !important;
top: auto !important;
z-index: auto !important;
}
/* Data-table tfoot prints as part of the body flow (not bottom-pinned).
SKIP the scaffold's own | — it MUST keep table-footer-group
(the @media print rule earlier in this stylesheet sets it). */
body.revogen-dashboard-page .rvg-main tfoot:not(.rvg-print-frame-foot) {
display: table-row-group !important;
}
/* Keep data-table rows/cells from being sliced across pages — but NEVER
the scaffold's own rows/cells (which MUST split: that's the whole
point of the architecture). The scaffold parts carry .rvg-print-frame*
classes so we exclude them precisely. */
body.revogen-dashboard-page .rvg-main tr,
body.revogen-dashboard-page .rvg-main td,
body.revogen-dashboard-page .rvg-main th {
page-break-inside: avoid;
break-inside: avoid;
}
/* Belt-and-braces — force the scaffold body cell to ALLOW page breaks.
Overrides the generic rule above (same specificity won → later rule
wins). Without this the long table body would refuse to split. */
body.revogen-dashboard-page .rvg-main .rvg-print-frame,
body.revogen-dashboard-page .rvg-main .rvg-print-frame-body,
body.revogen-dashboard-page .rvg-main .rvg-print-frame-body > tr,
body.revogen-dashboard-page .rvg-main .rvg-print-frame-body > tr > td {
page-break-inside: auto !important;
break-inside: auto !important;
}
/* Scaffold cells must have zero cell-padding — inner divs supply their
own spacing. Without this, any page-wide `td { padding: ... }` rule
would push the chrome down by the cell padding on every page. */
body.revogen-dashboard-page .rvg-main .rvg-print-frame > thead > tr > td,
body.revogen-dashboard-page .rvg-main .rvg-print-frame > tbody > tr > td,
body.revogen-dashboard-page .rvg-main .rvg-print-frame > tfoot > tr > td {
padding: 0 !important;
border: 0 !important;
line-height: inherit !important;
vertical-align: top !important;
}
}
/* ============================================================================
Print — generic page-fragmentation fixes (framework list + every CRUD page).
── WHY THIS BLOCK EXISTS ────────────────────────────────────────────────────
The scaffold above gives us a running header/footer THAT REPEATS PER PAGE.
For that to work, the print engine has to be ALLOWED to fragment the
scaffold's across multiple printed pages. Three classes of
pre-existing screen styles silently DEFEAT that:
(a) `overflow: clip` / `overflow: hidden` on , , or any
ancestor of the scaffold — these create "fragmentation containers"
and Chromium refuses to break a fragmentation container across pages.
Result: ALL of 's content squeezes onto page 1, the scaffold's
/ appear ONCE, no per-page repetition.
(b) `max-height: 80vh` (and similar viewport-relative caps) on internal
scroll wrappers like `.list-{table}-scroll`. In print, `100vh` ≡
paper page height, so the wrapper caps the inner data table at
~80% of a single page and the rest visually overflows (because
`overflow: visible` is set in print) ONTO the scaffold's .
The chrome looks "wrapped oddly" / "in the wrong place" on any
standard list page.
(c) Nested `` on the inner data table is `display:
table-header-group` by default, which makes it COMPETE with the
scaffold's outer thead for the page-header slot inside Chromium's
fragmenter. Force the inner thead to a normal row-group so only
the scaffold's thead repeats.
These three are interacting. Custom report templates that use their own
print zone (`.rpt-print-zone` pattern — see app reports for examples)
escape all three because they `display: none` everything else and show
only a clean flat table. Framework lists print their FULL DOM, so each
defect bites.
── WHY NOT TARGET .list-{table} SPECIFICALLY ────────────────────────────────
Every CRUD page in this framework — list, view, edit, dashboard hub,
admin — is rendered inside the scaffold and may contain a scroll wrapper
or sticky thead somewhere in its body. A generic rule is the only robust
answer; targeted patches are whack-a-mole.
── WHAT THIS BLOCK DOES NOT BREAK ───────────────────────────────────────────
* Custom report templates with their own `.rpt-print-zone` — they already
hide everything outside the zone (`.rpt-page > *:not(.rpt-print-zone)`)
and supply their own print stylesheet. None of the rules here override
their explicit `display: table-header-group` on inner print-zone tables.
* The voucher prints (`prints/_voucher_layout.twig`) — they use a separate
base layout (`prints/_layout.twig`) without `.rvg-main` / `.atlas-main`,
so these `.rvg-main` / `.atlas-main` selectors don't reach them.
* The scaffold itself — every rule uses `:not(.rvg-print-frame-head)` /
`:not(.rvg-print-frame-foot)` exclusions where it matters, and the
scaffold's own `display: table-*-group !important` rules win on the
scaffold parts.
============================================================================ */
@media print {
/* (a) Lift overflow clipping from the document root + body. Without this,
Chromium treats as a fragmentation container that cannot be
split across pages, and the scaffold's / repeat ONCE on
page 1 only. The screen-mode `overflow-x: clip` on + body lives
in dashboard.twig (intentional — prevents stray horizontal scroll on
the dashboard); print MUST reset it. */
html, body {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
height: auto !important;
max-height: none !important;
}
/* (b) Any internal scroll surface inside the printable pane must not
constrain vertical extent. Targets BOTH shells via attribute-prefix
matching for the framework's `list-*-scroll` convention, and a
generic catch-all for any explicit `overflow: auto/scroll` element.
The scaffold itself (`.rvg-print-frame`) is excluded — its
MUST be allowed to be the fragmentation root. */
body.revogen-dashboard-page .rvg-main [class$="-scroll"],
body.revogen-dashboard-page .rvg-main [class*="-scroll "],
body.revogen-atlas-shell .atlas-main [class$="-scroll"],
body.revogen-atlas-shell .atlas-main [class*="-scroll "] {
max-height: none !important;
height: auto !important;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
/* Drop transforms/contain/isolation that would create a stacking
or fragmentation context blocking page breaks. */
contain: none !important;
isolation: auto !important;
transform: none !important;
}
/* (c) Nested note — we DELIBERATELY leave non-scaffold
elements as `display: table-header-group` (the browser default).
Browsers handle nested table-header-group correctly: each table has
its own thead-repeat scope. The scaffold's outer thead repeats as
the page running header; the inner data-table's thead repeats as
the table's column header within its own span. This is exactly the
working pattern in custom report templates that use a print zone
(the inner zone table thead repeats AS WELL AS the scaffold's
running header).
If you ever need to suppress an inner thead's repeat (e.g. for a
presentation table where the column header should NOT repeat),
add `display: table-row-group` inline in that specific template —
do NOT add a generic suppressor here, it would break reports. */
/* (d) Belt-and-braces — any ancestor of the scaffold body that has a
lingering `contain`, `isolation`, or `transform` from screen styling
(e.g. is-sticky-headers' transform on .list-{table}) creates a new
fragmentation context. Neutralise all three across the printable
pane. The scaffold itself is excluded so its own
`border-collapse: collapse` table semantics survive. */
body.revogen-dashboard-page .rvg-main *:not(.rvg-print-frame):not(.rvg-print-header):not(.rvg-print-footer),
body.revogen-atlas-shell .atlas-main *:not(.rvg-print-frame):not(.rvg-print-header):not(.rvg-print-footer) {
contain: none !important;
isolation: auto !important;
}
/* (e) Allow every non-scaffold `` inside the printable pane to
be split across pages. Sticky-frozen-column geometry on screen sets
`table-layout: fixed` + explicit pixel widths; in print we want the
browser to size for paper. Width/max-width are intentionally NOT
overridden here — the inner stylesheets already set sensible widths
(e.g. `.pz-table { width: 100% }` on reports) and forcing 100% would
break narrower presentational tables. */
body.revogen-dashboard-page .rvg-main table:not(.rvg-print-frame),
body.revogen-atlas-shell .atlas-main table:not(.rvg-print-frame) {
table-layout: auto !important;
page-break-inside: auto !important;
break-inside: auto !important;
}
/* (f) Any `min-height: 100vh` / `min-height: 100dvh` / large `max-height`
on shell-level containers becomes catastrophic in print where 100vh ≡
paper height. Reset them on every layout box inside the printable
pane. The scaffold itself is excluded to keep its `display: table`
sizing free of artificial constraints. */
body.revogen-dashboard-page .rvg-main *:not(.rvg-print-frame),
body.revogen-atlas-shell .atlas-main *:not(.rvg-print-frame) {
min-height: 0 !important;
}
/* Same for `max-height` — limit to the wrappers that commonly carry it.
Avoid blanket `max-height: none !important` on `*` because some
legitimate elements (e.g. truncated cells) rely on max-height for
their visual design. Scope to scroll wrappers, sticky containers,
and the framework's list card. */
body.revogen-dashboard-page .rvg-main .rvg-list-card,
body.revogen-dashboard-page .rvg-main [class*="-card"],
body.revogen-atlas-shell .atlas-main .rvg-list-card,
body.revogen-atlas-shell .atlas-main [class*="-card"] {
max-height: none !important;
height: auto !important;
overflow: visible !important;
}
/* ── Hide the in-body page title row on print ──────────────────────────
The scaffold's running header already prints the page title + total
on EVERY page. Keeping the screen-level `.rvg-page-header` (which
holds the same title + a noisier count format like "50 of 41,839")
just duplicates the chrome. Hide it in print universally — saves
vertical space and removes the redundant heading on page 1. */
body.revogen-dashboard-page .rvg-main .rvg-page-header,
body.revogen-atlas-shell .atlas-main .rvg-page-header {
display: none !important;
}
}
/* ==========================================================================
FR-037 — Lookup Context Panel.
Read-only info card rendered above (or beside) a form when a lookup
field with `lookup_context` is chosen. Pattern modeled after
.rvg-rmeta-* — soft surface, accent-tinted header, definition list.
Theme-token only (--color-bg-alt, --color-border, --color-text-soft,
--color-accent). RTL-safe via `padding-inline-*` / `margin-inline-*`.
========================================================================== */
.rvg-lkctx-host {
margin-block-end: var(--space-3, 0.75rem);
}
.rvg-lkctx-host[hidden] { display: none; }
/* FR-072 — Card with accent header strip + grid body */
.rvg-lkctx-card {
/* Surface tracks the active theme (light → #fff, dark → #1f1f23
via --color-bg). Previously hard-coded #fff stayed white even
under [data-bs-theme="dark"], breaking the rest of the page's
palette. */
background: var(--color-bg, #fff);
border: 1px solid var(--color-border, #e9ecef);
border-radius: var(--radius-md, 8px);
margin-block-end: var(--space-3, 0.75rem);
color: var(--color-text, #1f2937);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
overflow: hidden;
}
/* Accent header strip — title sits inside an accent-coloured bar so it
reads as "section header" rather than just bold text. */
.rvg-lkctx-card__title {
margin: 0;
padding: 0.6rem 1rem;
background: color-mix(in srgb, var(--color-accent, #6366f1) 12%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--color-accent, #6366f1) 25%, transparent);
font-size: 0.9rem;
font-weight: 700;
color: color-mix(in srgb, var(--color-accent, #6366f1) 85%, var(--color-text) 15%);
letter-spacing: 0.02em;
display: flex;
align-items: center;
gap: 8px;
/* FR-089 — header is a toggle for collapse */
cursor: pointer;
user-select: none;
transition: background 0.15s ease;
}
.rvg-lkctx-card__title:hover,
.rvg-lkctx-card__title:focus-visible {
background: color-mix(in srgb, var(--color-accent, #6366f1) 18%, transparent);
outline: none;
}
.rvg-lkctx-card__title::before {
content: '';
width: 4px;
height: 16px;
background: var(--color-accent, #6366f1);
border-radius: 2px;
}
/* FR-089 — chevron icon + smooth collapse animation. The chevron is
appended into the title via JS so legacy and grouped layouts get the
same affordance. */
.rvg-lkctx-chevron {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
color: color-mix(in srgb, var(--color-accent, #6366f1) 75%, var(--color-text) 25%);
transition: transform 0.25s ease;
margin-inline-start: auto;
}
.rvg-lkctx-chevron svg {
width: 14px;
height: 14px;
fill: currentColor;
}
.rvg-lkctx-card--collapsed .rvg-lkctx-chevron {
transform: rotate(-90deg);
}
.rvg-lkctx-list,
.rvg-lkctx-card__body {
overflow-y: hidden;
max-height: 1000px;
opacity: 1;
transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}
.rvg-lkctx-card--collapsed .rvg-lkctx-list,
.rvg-lkctx-card--collapsed .rvg-lkctx-card__body {
max-height: 0;
opacity: 0;
padding-block-start: 0;
padding-block-end: 0;
}
/* FR-089 — loading state: centred spinner replaces "loading…" text */
.rvg-lkctx-state--loading {
display: flex;
align-items: center;
justify-content: center;
padding: 1.75rem 1rem;
min-height: 90px;
}
.rvg-lkctx-spinner {
display: inline-block;
width: 36px;
height: 36px;
border: 4px solid color-mix(in srgb, var(--color-accent, #6366f1) 18%, transparent);
border-top-color: var(--color-accent, #6366f1);
border-radius: 50%;
animation: rvg-lkctx-spin 0.85s linear infinite;
}
@keyframes rvg-lkctx-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.rvg-lkctx-spinner { animation-duration: 2s; }
}
/* Grid body — auto-fit so columns fill the available width, then drop to
fewer columns when there isn't enough room. No more horizontal scroll. */
/* FR-155 — canonical summary-card layout: a horizontal row of icon-on-top
facts separated by a thin vertical rule (promoted from the presence per-table
design into the generic renderer; the per-field icon comes from the dna /
the summary-cards console — data-driven, no per-table script). */
.rvg-lkctx-list {
display: flex;
flex-wrap: nowrap;
justify-content: center;
overflow-x: auto;
gap: 0.5rem;
margin: 0;
padding: 0.85rem;
width: 100%;
list-style: none;
scrollbar-width: thin;
scrollbar-color: var(--color-border, #e9ecef) transparent;
}
.rvg-lkctx-list::-webkit-scrollbar { height: 6px; }
.rvg-lkctx-list::-webkit-scrollbar-thumb { background: var(--color-border, #e9ecef); border-radius: 3px; }
.rvg-lkctx-item {
/* FR-155 — equal columns that fill the full width; no max cap so a single
item stretches to 100% and centers its content (owner 2026-06-23). */
flex: 1 1 0;
min-width: 130px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 5px;
padding: 0.25rem 0.6rem 0.5rem;
background: transparent;
border: none;
position: relative;
}
/* thin vertical divider between adjacent facts (RTL-safe) — «الفواصل» */
.rvg-lkctx-list .rvg-lkctx-item + .rvg-lkctx-item::before {
content: '';
position: absolute;
inset-block: 18%;
inset-inline-start: calc(-0.25rem - 0.5px);
width: 1px;
background: var(--color-border, #e5e7eb);
opacity: 0.75;
pointer-events: none;
}
/* icon-on-top block — rendered from the field's `icon` (set in the console) */
.rvg-lkctx-itemicon {
width: 52px;
height: 52px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--color-accent, #6366f1);
}
.rvg-lkctx-itemicon svg { width: 26px; height: 26px; fill: currentColor; }
@media (max-width: 768px) {
.rvg-lkctx-list { gap: 0.4rem; padding: 0.6rem; }
.rvg-lkctx-item { flex: 0 0 auto; min-width: 140px; }
.rvg-lkctx-itemicon { width: 46px; height: 46px; border-radius: 12px; }
.rvg-lkctx-itemicon svg { width: 22px; height: 22px; }
}
.rvg-lkctx-label {
font-size: 0.72rem;
font-weight: 600;
color: var(--color-text-soft, #868e96);
margin: 0;
line-height: 1.2;
}
.rvg-lkctx-value {
font-weight: 700;
font-size: 0.92rem;
color: var(--color-text, #1f2937);
font-variant-numeric: tabular-nums;
margin: 0;
line-height: 1.35;
/* honour the `\n` of a two-line merge ({a}\n{b}) as a real line break;
single-line values are unaffected (no newline to render). */
white-space: pre-line;
min-width: 0;
}
/* ==========================================================================
FR-081 — grouped layouts: chips + timeline.
Composes with the legacy card (.rvg-lkctx-card) — the grouped card
carries `.rvg-lkctx-card--grouped` and houses one or more
``.
Design rules:
- Token-only colors (--color-accent, --color-border, --color-bg-alt,
--color-text*) — respects every theme + dark mode + accent.
- "No padding waste" — chip body min-paddings, no excessive gaps.
- RTL-safe via padding-inline-* / margin-inline-*.
- Mobile (≤520px): chips wrap onto rows (still compact), timeline
becomes vertical chain. Zero horizontal scrollbars.
========================================================================== */
.rvg-lkctx-card--grouped .rvg-lkctx-card__body {
padding: 0.5rem 0.75rem 0.65rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.rvg-lkctx-group__title {
margin: 0 0 0.35rem;
font-size: 0.7rem;
font-weight: 700;
color: var(--color-text-soft, #868e96);
text-transform: uppercase;
letter-spacing: 0.07em;
}
.rvg-lkctx-group__body {
/* default flex; specific layouts override below */
display: flex;
align-items: stretch;
}
/* ─── Chips layout — grid distributes evenly across full width ─────── */
.rvg-lkctx-group--chips .rvg-lkctx-group__body {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
gap: 0.5rem;
}
.rvg-lkctx-chip {
display: flex; /* fills its grid cell */
align-items: center;
gap: 0.55rem;
padding: 0.45rem 0.7rem;
background: var(--color-bg-alt, #f8f9fa);
border: 1px solid var(--color-border, #e9ecef);
border-radius: var(--radius-sm, 6px);
border-inline-start: 3px solid color-mix(in srgb, var(--color-accent, #6366f1) 70%, transparent);
line-height: 1.25;
min-width: 0;
transition: border-color 0.15s ease, background 0.15s ease;
}
.rvg-lkctx-chip:hover {
border-inline-start-color: var(--color-accent, #6366f1);
background: color-mix(in srgb, var(--color-accent, #6366f1) 4%, var(--color-bg-alt, #f8f9fa));
}
.rvg-lkctx-chip__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
color: color-mix(in srgb, var(--color-accent, #6366f1) 88%, var(--color-text) 12%);
flex-shrink: 0;
}
.rvg-lkctx-icon {
width: 100%;
height: 100%;
fill: currentColor;
}
.rvg-lkctx-chip__body {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.2;
flex: 1;
}
.rvg-lkctx-chip__label {
font-size: 0.66rem;
font-weight: 600;
color: var(--color-text-soft, #868e96);
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
}
.rvg-lkctx-chip__value {
font-size: 0.92rem;
font-weight: 700;
color: var(--color-text, #1f2937);
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.rvg-lkctx-chip__value--empty {
color: var(--color-text-soft, #adb5bd);
font-weight: 500;
font-style: italic;
}
/* ─── Timeline layout — equal-width steps + solid line between bubbles ─ */
.rvg-lkctx-group--timeline .rvg-lkctx-group__body {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
gap: 0;
padding-block: 0.35rem;
}
.rvg-lkctx-step {
display: flex;
flex-direction: column;
align-items: center;
flex: 1 1 0;
min-width: 0;
position: relative;
text-align: center;
padding-inline: 0.4rem;
}
.rvg-lkctx-step__bubble {
width: 2.6rem;
height: 2.6rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--color-accent, #6366f1) 16%, var(--color-bg, #fff));
color: color-mix(in srgb, var(--color-accent, #6366f1) 90%, var(--color-text) 10%);
border: 2px solid color-mix(in srgb, var(--color-accent, #6366f1) 75%, transparent);
position: relative;
z-index: 1;
}
.rvg-lkctx-step__bubble .rvg-lkctx-icon {
width: 1.25rem;
height: 1.25rem;
}
.rvg-lkctx-step__caption {
margin-block-start: 0.3rem;
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
max-width: 100%;
}
.rvg-lkctx-step__label {
font-size: 0.65rem;
font-weight: 600;
color: var(--color-text-soft, #868e96);
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
}
.rvg-lkctx-step__value {
font-size: 0.85rem;
font-weight: 700;
color: var(--color-text, #1f2937);
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.rvg-lkctx-step__value--empty {
color: var(--color-text-soft, #adb5bd);
font-weight: 500;
font-style: italic;
}
/* Horizontal solid connector line between bubbles.
- Anchored at the step's centre (inset-inline-start: 50%) and spans
100% of step width → the visible segment runs from this step's
bubble centre to the next step's bubble centre.
- Vertically centred on the bubble (top = bubble half-height).
- z-index 0 slides it under the bubble (which is z-index 1). */
.rvg-lkctx-step__arrow {
position: absolute;
top: 1.3rem; /* half of bubble height (2.6rem / 2) */
inset-inline-start: 50%;
width: 100%;
height: 2px;
background: color-mix(in srgb, var(--color-accent, #6366f1) 55%, transparent);
pointer-events: none;
z-index: 0;
}
/* ─── Mobile (≤ 520px) — timeline becomes vertical chain ───────────── */
@media (max-width: 520px) {
.rvg-lkctx-group--timeline .rvg-lkctx-group__body {
flex-direction: column;
align-items: flex-start;
overflow-x: visible;
gap: 0.35rem;
}
.rvg-lkctx-step {
flex-direction: row;
align-items: center;
gap: 0.6rem;
text-align: start;
min-width: 0;
width: 100%;
padding-inline: 0;
}
.rvg-lkctx-step__bubble {
flex-shrink: 0;
}
.rvg-lkctx-step__caption {
margin-block-start: 0;
align-items: flex-start;
}
/* Vertical connector to the right of bubble centre, under the step.
Reset desktop's horizontal positioning entirely. */
.rvg-lkctx-step__arrow {
position: static;
top: auto;
inset-inline-end: auto;
width: 2px;
height: 0.65rem;
margin-inline-start: 1.3rem;
background: color-mix(in srgb, var(--color-accent, #6366f1) 55%, transparent);
}
/* Chips: stay grid, tighter padding on small screens */
.rvg-lkctx-group--chips .rvg-lkctx-group__body {
grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
gap: 0.4rem;
}
.rvg-lkctx-chip { padding: 0.4rem 0.55rem; }
}
/* ───────────────────────────────────────────────────────────────────
FR-038 — `field.readonly` visual cue.
Wrapper-level `.is-readonly` is appended by form.twig whenever the
field is rendered as not-editable (either dna `readonly: true` or
the legacy `readonly_on_edit` on update). Token-based colors only,
so dark-mode + admin's accent flow through with zero overrides.
RTL-safe (margin/padding-free). Click-blocking is achieved by the
underlying `[readonly]` / `[disabled]` attribute set on the input;
`cursor: not-allowed` here is purely the visual hint.
─────────────────────────────────────────────────────────────────── */
.is-readonly {
opacity: 0.85;
}
.is-readonly :is(input, select, textarea):is([readonly], [disabled]),
.is-readonly .rvg-dp-trigger[disabled],
.is-readonly .fg-enum-pill[disabled]:not(.is-active),
.is-readonly .fg-bool-pill input[type="checkbox"][disabled] {
background: color-mix(in srgb, var(--color-bg-alt, #f8f9fa) 80%, transparent);
border-color: color-mix(in srgb, var(--color-border, #e9ecef) 70%, transparent);
color: var(--color-text-soft, #868e96);
cursor: not-allowed;
}
/* Readonly enum-pill group (e.g. transfers.state post-creation) — when
the field is locked the non-active choices are visual noise. Hide them
and let the active pill stand alone as a clear status badge. */
.is-readonly .fg-enum-pills .fg-enum-pill[disabled]:not(.is-active) {
display: none;
}
.is-readonly .fg-enum-pills {
background: transparent;
border: none;
padding: 0;
}
.is-readonly .fg-enum-pill.is-active[disabled] {
cursor: default;
}
.is-readonly :is(input, select, textarea):is([readonly], [disabled]):hover,
.is-readonly :is(input, select, textarea):is([readonly], [disabled]):focus {
/* Suppress the accent-tinted hover/focus border for fields the user
cannot edit — keeps the visual signal honest. */
border-color: color-mix(in srgb, var(--color-border, #e9ecef) 70%, transparent) !important;
box-shadow: none !important;
}
/* Disabled `` browsers vary — make sure the swatch
itself looks inert too. */
.is-readonly input[type="color"][disabled] {
filter: grayscale(0.4);
cursor: not-allowed;
}
/* FR-075 — audit field rendered as static text in the form (created/
updated by/at, created_by_group). Matches the visual weight of a
readonly input so the form rhythm stays consistent. */
.fg-audit-static {
display: flex; align-items: center;
min-height: 44px;
padding: 8px 12px;
background: color-mix(in srgb, var(--color-bg-alt, #f8f9fa) 80%, transparent);
border: 1px solid color-mix(in srgb, var(--color-accent) 46%, transparent);
border-radius: var(--radius-md, 6px);
color: var(--color-text-soft, #868e96);
font-size: 14px;
cursor: not-allowed;
}
.fg-audit-static-empty { opacity: 0.6; }
.fg-audit-static-user,
.fg-audit-static-group { color: var(--color-text); font-weight: 500; }
.fg-audit-static-datetime {
display: inline-flex; gap: 8px; align-items: center;
}
.fg-audit-static-date { color: var(--color-text); font-weight: 500; }
.fg-audit-static-time {
color: var(--color-text-soft);
font-variant-numeric: tabular-nums;
font-size: 13px;
}
/* FR-077 — Admin-customisable totals row cells.
Modifier classes attached by list.twig when admin set sum_color or
sum_size in field_overrides. Both modifiers stack; absence of either
leaves the cell at its default styling.
`!important` is intentional: list.twig ships a per-table CSS rule
`.list-{table}-totals .list-{table}-total-cell strong { color: accent; }`
with specificity (0,2,1) that beats any reasonably-flat selector here.
The admin's pick is an explicit override of that default — so we win. */
.rvg-list-sum--default strong { color: var(--color-accent) !important; }
.rvg-list-sum--accent strong { color: var(--color-accent) !important; }
.rvg-list-sum--success strong { color: var(--color-success, #16a34a) !important; }
.rvg-list-sum--warning strong { color: var(--color-warning, #d97706) !important; }
.rvg-list-sum--danger strong { color: var(--color-danger, #dc2626) !important; }
.rvg-list-sum--muted strong { color: var(--color-text-soft) !important; font-weight: 500 !important; }
.rvg-list-sum--info strong { color: var(--color-info) !important; }
.rvg-list-sum--dark strong { color: var(--color-text) !important; font-weight: 700 !important; }
.rvg-list-sum--sm strong { font-size: 11px !important; font-weight: 600 !important; }
.rvg-list-sum--md strong { font-size: 13px !important; font-weight: 700 !important; }
.rvg-list-sum--lg strong { font-size: 16px !important; font-weight: 700 !important; }
.rvg-list-sum--xl strong { font-size: 20px !important; font-weight: 800 !important; letter-spacing: 0.5px !important; }
.rvg-list-sum--lg small,
.rvg-list-sum--xl small { font-size: 12px !important; }
/* FR-094 — lookup thumbnail stacked above its label.
Opt-in per lookup field via `lookup_thumbnail_field` on dna; rendered
in list cells, detail values, and children preview rows. Vertical stack
(icon on top, label below, centred) — matches the agreed UX. */
.rvg-lookup-thumb-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
line-height: 1.2;
text-align: center;
}
.rvg-lookup-thumb-cell img {
width: 34px;
height: 34px;
object-fit: contain;
border-radius: 6px;
flex-shrink: 0;
}
/* ==========================================================================
iOS Safari — disable form field auto-zoom on focus
──────────────────────────────────────────────────────────────────────────
iOS Safari auto-zooms when the user taps any input/select/textarea
whose computed font-size is < 16px. It's an "accessibility" feature
that makes small text easier to read, but it's disruptive: the page
reflows, and the user has to manually zoom back out.
The fix is to ensure every form field renders at ≥16px on mobile.
We do NOT add `maximum-scale=1` to the viewport meta tag — that would
disable the user's ability to pinch-zoom the page on demand. This rule
ONLY changes the input font size so iOS no longer feels the need to
zoom for us.
Applied as a media query so desktop typography (often 14px for dense
tables/forms) is untouched.
========================================================================== */
@media (max-width: 768px) {
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea {
font-size: 16px;
}
}
/* ==========================================================================
FR-101 — Inline children grid (master+detail in one form)
--------------------------------------------------------------------------
The block is a card under the parent's regular fields. Designed to feel
like one of the form's `.fg-*` field groups — same border, same radius,
same neutral palette — but with a `` inside so dense data fits.
Selectors:
.rvg-ic-block wrapper (card)
.rvg-ic-header title + add button
.rvg-ic-title h3 + count badge
.rvg-ic-add-btn primary add button
.rvg-ic-table-wrap scroll container (mobile overflow)
.rvg-ic-table the grid table
.rvg-ic-thead header row
.rvg-ic-th header cell
.rvg-ic-th-num row-number column (narrow)
.rvg-ic-th-total running total column
.rvg-ic-th-actions remove-button column (narrow)
tbody the row container (server + new rows)
.rvg-ic-row generic row (new OR existing)
.rvg-ic-row-new user-added row (live + removable)
.rvg-ic-row-existing DB-loaded row (read-only)
.rvg-ic-cell generic cell
.rvg-ic-cell-num row number cell
.rvg-ic-cell-input cell holding a form input
.rvg-ic-cell-readonly plain-text existing-row cell
.rvg-ic-cell-total live total cell
.rvg-ic-cell-actions remove-button cell
.rvg-ic-empty empty-state row (full-width message)
.rvg-ic-empty-cell its |
.rvg-ic-empty-inner icon + text wrapper
.rvg-ic-tfoot grand-total footer row
.rvg-ic-tfoot-label label cell (start-aligned, bold)
.rvg-ic-tfoot-total sum cell (accent-coloured)
.rvg-ic-remove-btn per-row remove icon button (X)
.rvg-ic-pill BoQ-awareness pill (inline next to lookup cell)
.rvg-ic-pill-in green: within BoQ
.rvg-ic-pill-out yellow: outside BoQ
.rvg-ic-pill-checking neutral grey: AJAX in flight
========================================================================== */
.rvg-ic-block {
margin-top: var(--space-5);
padding: var(--space-4);
background: color-mix(in srgb, var(--color-accent) 3%, var(--color-bg));
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.rvg-ic-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap; /* title may wrap above buttons on narrow viewports */
gap: var(--space-3);
margin-bottom: var(--space-3);
}
/* Header action cluster — keeps "فتح القائمة" + "+ إضافة بند" pinned
side-by-side as one toolbar group, no matter how narrow the parent.
`flex-wrap: nowrap` prevents the two buttons from stacking vertically
when the title + buttons row gets squeezed. `flex-shrink: 0` keeps the
buttons at their natural width so the *title* wraps to a new line on
narrow viewports, not the action group. */
.rvg-ic-header-actions {
display: inline-flex;
align-items: center;
flex-wrap: nowrap;
flex-shrink: 0;
gap: var(--space-2);
}
/* On narrow viewports, both buttons collapse to icon-only so they
stay side-by-side instead of overflowing or stacking awkwardly.
The title is still readable above; the user gets two compact
square-ish buttons. The `title=...` attribute provides the
tooltip / accessibility hint for the hidden label. */
@media (max-width: 560px) {
.rvg-ic-header-actions .rvg-ic-add-btn > span:not(.revogen-icon),
.rvg-ic-header-actions .rvg-ic-viewall-link > span:not(.revogen-icon) {
display: none;
}
.rvg-ic-header-actions .rvg-ic-add-btn,
.rvg-ic-header-actions .rvg-ic-viewall-link {
padding: 0.4rem 0.7rem;
}
}
.rvg-ic-title {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin: 0;
font-size: var(--text-base);
font-weight: 600;
color: var(--color-text);
}
.rvg-ic-title .revogen-icon {
width: 16px;
height: 16px;
color: var(--color-accent);
}
.rvg-ic-add-btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.4rem 0.85rem;
background: var(--color-accent);
color: #fff;
border: 1px solid var(--color-accent);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: 500;
cursor: pointer;
transition: background var(--transition), border-color var(--transition);
}
.rvg-ic-add-btn:hover:not(:disabled) {
background: var(--color-accent-hover);
border-color: var(--color-accent-hover);
}
.rvg-ic-add-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.rvg-ic-add-btn .revogen-icon {
width: 14px;
height: 14px;
}
.rvg-ic-table-wrap {
overflow-x: auto;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.rvg-ic-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
.rvg-ic-thead {
background: var(--color-bg-alt);
border-bottom: 2px solid var(--color-accent-soft);
}
.rvg-ic-th {
padding: var(--space-3) var(--space-3);
text-align: start;
font-weight: 600;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.025em;
color: var(--color-text-muted);
border-bottom: 1px solid var(--color-border);
white-space: nowrap;
}
.rvg-ic-th-num { width: 40px; text-align: center; }
.rvg-ic-th-total { width: 130px; text-align: end; }
.rvg-ic-th-actions { width: 44px; }
.rvg-ic-row {
border-bottom: 1px solid var(--color-border);
transition: background var(--transition);
}
.rvg-ic-row:last-child {
border-bottom: none;
}
.rvg-ic-row-new:hover,
.rvg-ic-row-existing:hover {
background: color-mix(in srgb, var(--color-accent) 4%, var(--color-bg));
}
.rvg-ic-cell {
padding: var(--space-2) var(--space-3);
vertical-align: middle;
color: var(--color-text);
}
.rvg-ic-cell-num {
text-align: center;
font-size: 0.78rem;
color: var(--color-text-soft);
width: 40px;
}
.rvg-ic-cell-readonly {
font-size: var(--text-sm);
color: var(--color-text);
}
.rvg-ic-cell-input {
padding: var(--space-1) var(--space-2);
}
/* The actual / | |