is not a positionable box in most engines. */
.cw-pi-table tfoot td {
position: sticky;
bottom: 0;
z-index: 2;
background-color: #f8f9fc;
border-top: 2px solid rgba(0, 0, 0, 0.12);
/* The row is opaque, so zebra striping cannot show through from beneath it. */
background-clip: padding-box;
}
.filter-bar input,
.filter-bar label {
line-height: 1;
margin-bottom: 0;
}
.filter-bar .form-control-sm {
height: 24px;
padding: 0 6px;
}
/* Help snippets — the info icon, its panel content, and the intercept modal.
The icon sits inline after a label. Submenu rows are tight, so it must not wrap or shift the
label: no block display, no line-height growth, and it is appended AFTER the ellipsis span
rather than inside it. popover() already emits a style attribute on the icon, so the look has
to live here.
TAP TARGET: the icon lives INSIDE a nav anchor, so a near-miss fires the nav item instead of the
help. On touch the padding below widens the hit area well past the glyph; the negative margin
keeps the visual position identical so nothing shifts on desktop. */
/* ALIGNMENT: vertical-align MIDDLE, not baseline. The icon is a 12px glyph sitting next to ~16px
label text, and in a dropdown item the label is an inline-block with overflow:hidden — whose
baseline is its BOTTOM margin edge, not its text baseline. Baseline-aligning against that dropped
the icon 8px below the middle of the label (measured). The label span carries the matching
vertical-align:middle in renderNavbar(), so the two boxes centre on each other. */
.help-snippet-icon {
margin-left: 6px;
font-size: 12px;
line-height: 1;
vertical-align: middle;
text-decoration: none;
color: #6b86ad;
cursor: pointer;
}
.help-snippet-icon:hover,
.help-snippet-icon:focus {
color: #1D2951;
outline: none;
}
/* A RIGHT-HAND COLUMN, so the icons line up instead of tracking the length of each label ("Clients"
against "Affiliate Profiles" put them in a ragged diagonal). Every item in a menu is the same
width, so margin-left:auto lands each icon the same distance from the menu's right edge and they
read as a column.
Flex rather than a float or absolute positioning: a float would drop the icon out of the line box
and lose the vertical centring, and absolute positioning would fight the enlarged touch target on
phones (which is built from padding and negative margins). align-items:center also centres the
icon exactly, which is the same thing vertical-align:middle was doing.
Only items that HAVE an icon get the class, so nothing else in the menu changes. */
.navbar .dropdown-item.has-help-snippet {
display: flex;
align-items: center;
}
.navbar .dropdown-item.has-help-snippet .help-snippet-icon {
margin-left: auto;
padding-left: 10px; /* keeps a long label from butting against the glyph */
}
.navbar .nav-link > .help-snippet-icon {
color: #cdd8ea;
}
.navbar .nav-link > .help-snippet-icon:hover,
.navbar .nav-link > .help-snippet-icon:focus {
color: #ffffff;
}
/* ZR-10325 — the hover X on an open report in the Reports menu.
Same right-hand column trick as the help icon above, and for the same reason: a glyph that
tracks the end of each label puts the icons on a ragged diagonal, and these labels are report
names, which vary wildly in length.
HIDDEN UNTIL THE ROW IS HOVERED, because it is a tidy-up affordance rather than part of the
entry — the entry is a link to a report, and an X sitting permanently beside it reads like a
delete button on the report itself. It is not: it takes the entry off the menu and nothing else.
opacity, NOT display/visibility: the row must not change width when the glyph appears, or every
label shifts under the mouse on hover.
TOUCH HAS NO HOVER, so on a device that cannot hover it is simply always visible at a lower
contrast. Without this it would be unreachable on a phone. */
.navbar .dropdown-item.has-nav-remove {
display: flex;
align-items: center;
}
.navbar .dropdown-item .nav-item-remove {
margin-left: auto;
padding-left: 12px;
font-size: 12px;
line-height: 1;
color: #adb5bd;
opacity: 0;
cursor: pointer;
transition: opacity 0.12s ease, color 0.12s ease;
}
.navbar .dropdown-item:hover .nav-item-remove,
.navbar .dropdown-item .nav-item-remove:focus {
opacity: 1;
}
.navbar .dropdown-item .nav-item-remove:hover {
color: #dc3545;
}
@media (hover: none) {
.navbar .dropdown-item .nav-item-remove { opacity: 0.55; }
}
body.dark-mode .navbar .dropdown-item .nav-item-remove {
color: #8d959d;
}
body.dark-mode .navbar .dropdown-item .nav-item-remove:hover {
color: #ff6b6b;
}
/* ZR-10382 #6 - THE X MUST NOT MOVE BETWEEN CLICKS.
------------------------------------------------------------------------------------------
Daniel: "it would be good if this X button were either static, or to the left. When the report
names are longer or shorter, the button shifts, making it a little more cumbersome to get all
reports out of view."
The margin-left:auto column above already lines the Xs up WITHIN one render - measured, all six
at the same x. What it does not do is hold still while reports are being taken off, and taking
them off one after another is the whole of what Daniel was doing.
A .dropdown-menu is absolutely positioned, so it is shrink-to-fit: its width is the width of its
widest row. reportNavClose() removes the row from the DOM, so closing the longest-named report
re-measures the menu, and every remaining X moves left with the right-hand edge. Measured on six
open reports (names 15-58 chars): the menu walked 393 -> 377.8 -> 338.2 -> 284.0 -> 208.8 px and
after the second close the pointer was no longer over the menu at all.
THE FIX IS TO STOP THE ROW WIDTH DEPENDING ON THE NAME. The label box becomes a fixed 300px
column instead of a box that grows to the text, so every row - and therefore the menu, and
therefore the X - is the same width whatever is open and whatever is removed. Nothing new is
ever clipped: 300px is the SAME number the label already carries as its inline max-width, so a
name that fits today still fits and a name that ellipses today still ellipses. The cost is a
Reports menu that stays at its full width even when only short names are open; that is the
price of "static", and static is what was asked for.
SCOPED TO .has-nav-remove, which today only the open-report entries carry. Every other dropdown
in the navbar - Tools, Profile Management, Accounting, Collections, the nested submenus - is
outside every selector here and is not touched.
AND SCOPED TO THE DESKTOP NAVBAR. Below navbar-expand-lg the menu is not a floating shrink-to-fit
panel at all - it is static inside the collapsed hamburger, sized by the viewport - so there is
no reflow to fix there, and a 300px floor would push a short name past the edge of a phone that
fits it comfortably today. Nothing below 992px changes. */
@media (min-width: 992px) {
.navbar .dropdown-item.has-nav-remove > .nav-item-label {
flex: 0 0 300px; /* == the inline max-width on the same span, so clipping is unchanged */
min-width: 0; /* a flex item defaults to min-width:auto, which refuses to clip its text */
}
}
/* The icons are a column, not text: they keep their own size no matter what sits beside them. */
.navbar .dropdown-item.has-nav-remove > .nav-item-lead,
.navbar .dropdown-item.has-nav-remove .help-snippet-icon,
.navbar .dropdown-item.has-nav-remove .nav-item-remove {
flex: none;
}
/* ONE auto margin per row, or the free space is split between them and the help icon floats into
the middle of the row instead of sitting next to the X. No entry has both a help snippet and a
remove X today, so this changes nothing on screen; it is here so the pair cannot come apart the
first time one does. Items without .has-nav-remove keep the rule above verbatim. */
.navbar .dropdown-item.has-help-snippet.has-nav-remove .help-snippet-icon {
margin-left: 0;
}
/* ZR-10382 #6, second pass - ONE ICON LEFT, ONE ICON RIGHT.
------------------------------------------------------------------------------------------
Chris, on the first pass: "the split is obvious... one icon left, one right. We are not, like,
over doing stuff. It is kind of odd how it is looking now." Both icons had ended up stacked at
the right edge, which reads as one cluster of three marks rather than as a row with a start and
an end. So the info icon moves to a slot at the LEFT edge and the X stays pinned right.
THE LEFT SLOT IS A FIXED COLUMN FOR THE SAME REASON THE LABEL IS. A slot that sized itself to
its contents would put the label start - and therefore everything after it - a few pixels out
between a row showing the 16px info icon, a row showing the 7px new-report dot, and a row
showing neither. That is the original bug rebuilt at the other edge, so the slot is 16px wide
whatever is in it, and navDropdownLeadHtml() emits it even when it is empty.
The slot is the hover target, not the glyph inside it: it is the full height of the row, which
makes the 7px dot reachable without changing how the dot looks. That needs align-self:stretch,
NOT center - measured in Chrome, center shrink-wraps an inline-flex item to its content, so on a
dot row the slot came out 16x7 inside a 32px row and the hover only fired within about 2px of the
row centre. Stretch is what makes the comment above true. */
.navbar .dropdown-item.has-nav-remove > .nav-item-lead {
width: 16px; /* the info icon's own width - the dot is centred in the same box */
margin-right: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
align-self: stretch;
}
/* Sizing lives here, NOT in a style attribute on the img: popover() appends a style attribute of
its own, and when an element carries two the browser keeps the first and silently drops the
second - so an inline style here would cost the popover its cursor, or the icon its size,
depending which won the race. (Found by the ZR-10383 tooltip work.) */
.nav-item-info {
width: 16px;
height: 16px;
display: block;
}
/* .report-nav-new carries margin-right:7px for its old life inline at the front of the label text.
In the slot the slot does the spacing, so that margin would just push the dot off centre.
It also grows here, and ONLY here. At 7px, sized for sitting inline in a line of text, the dot
read as an afterthought next to the 16px info icon in the same column on neighbouring rows. 11px
is close to the icon without matching it, so the two still read as different things. Scoped to
the slot so the dot keeps its original size everywhere else it is used. */
.navbar .dropdown-item.has-nav-remove > .nav-item-lead .report-nav-new {
margin: 0;
width: 11px;
height: 11px;
}
/* The unviewed popover carries two things now - the unviewed line, then the report's own
description under it - so the two need separating. Both are spans set through innerHTML, hence
display:block rather than relying on markup. */
.nav-lead-new-line {
display: block;
font-weight: 600;
}
.nav-lead-detail {
display: block;
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid #e0e0e0; /* the panel is white (.custom-popover-v2), so this is a light rule */
}
/* Panel content. Colour is set here rather than inline because .custom-popover-v2 sets none, so on
a light-text page the panel would otherwise render white on white. */
.help-snippet-topic {
font-weight: 600;
margin-bottom: 6px;
color: #212529;
}
.help-snippet-body {
line-height: 1.45;
color: #212529;
}
/* Pasted screenshots are the main reason a panel is ever wide. The panel sizes itself to its
content (see helpIcon), so the job here is only to stop an image pushing past that width — never
to crop it. height:auto keeps the aspect ratio when the width is reduced.
The max-height is what makes the panel readable rather than a wall of image: a screenshot is shown
at a size that fits beside its words, and FULL SIZE IS A CLICK AWAY (enhanceSnippetImages wires
the house showImagePreview onto it, the same zoom the tutorials and the support thread use). These
are the house numbers from enhanceSupportMessageImages, with a taller cap because help content is
read, not skimmed past in a chat. */
.help-snippet-body img {
max-width: 100%;
max-height: 360px;
width: auto;
height: auto;
object-fit: contain;
display: block;
margin: 6px 0;
border-radius: 6px;
}
/* A table or a in an authored body cannot shrink, so let it scroll on its own rather than
widening the panel past the viewport. */
.help-snippet-body table,
.help-snippet-body pre {
max-width: 100%;
overflow-x: auto;
display: block;
}
.help-snippet-actions {
margin-top: 8px;
padding-top: 6px;
border-top: 1px solid rgba(0,0,0,.12);
font-size: 12px;
}
/* ── THE HOVER PANEL MUST NEVER SCROLL SIDEWAYS ──────────────────────────────────────────────
Applied via data-popover-class="help-snippet-panel" (helpIcon), so this touches the help panels
and no other [data-popover-v2] in the app.
THE PANEL IS NOT THE SCROLL CONTAINER. It used to be — helpSnippetPanelStyle() put
overflow:auto on it so long help could scroll. That is what made the sideways scroll possible at
all, because .custom-popover-v2::after (the caret) is deliberately outdented past the box edge:
at data-arrow-placement="left" it sits at right:-6px, and on a scroll container a 6px outdent is
6px of scrollable overflow. It only became visible when nav panels moved to the left (ZR-10267),
where the caret moved from left:-6px — which is not scrollable — to right:-6px, which is.
overflow-x:hidden on the panel does NOT fix it: it hides the scrollbar while scrollWidth still
exceeds clientWidth. Measured. The scroll has to move off this box entirely, so the panel goes
back to overflow:visible and the BODY below scrolls instead. */
.help-snippet-panel {
text-align: left;
line-height: 1.45;
}
/* A caret cannot coexist with a scroll container, and it has been invisible on these panels ever
since overflow:auto clipped it. Dropped rather than left as a clipped sliver — the panel is
already tied to its row by vertical alignment. */
.help-snippet-panel::after {
content: none;
}
/* Long help scrolls HERE instead, on one axis only. The topic and the actions row stay outside it,
so "View full tutorial" does not scroll away from a long body. */
.help-snippet-panel .help-snippet-body {
max-height: min(60vh, 520px);
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
}
/* ── AUTHOR-CONTROLLED CONTENT ───────────────────────────────────────────────────────────────
Bodies are pasted into TrooEditor by Daniel, so the rules below have to hold for HTML nobody has
seen yet — a bare URL, a pasted table, a screenshot, a div carrying an inline width — not just
for the snippets seeded today. Without them a single unbreakable token widened the content box by
772px (measured). Shared with the intercept modal, which has the same author and the same hazard.
overflow-wrap:anywhere is the load-bearing one: as well as breaking a long token, it lets the box
report a min-content width it can actually shrink to. */
.help-snippet-topic,
.help-snippet-body,
.help-snippet-actions {
overflow-wrap: anywhere;
word-break: break-word;
}
/* Nothing pasted in may be wider than the panel — covers the fixed-width div and the oversized
image alike, without having to name every element that might carry a width. */
.help-snippet-body * {
max-width: 100%;
box-sizing: border-box;
}
/* preserves whitespace, so it cannot wrap without being told to. */
.help-snippet-body pre {
white-space: pre-wrap;
}
/* A pasted table sizes itself from its widest cell. Fixed layout makes the columns share the panel
width instead; the overflow-x:auto above stays as the fallback for one that still cannot fit. */
.help-snippet-body table {
table-layout: fixed;
width: 100%;
}
/* Intercept modal — the click-through window. Its own overlay rather than a Bootstrap modal so it
cannot collide with a modal the page already has open. */
.help-snippet-modal {
position: fixed;
inset: 0;
z-index: 20000;
background: rgba(0,0,0,.45);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
/* WIDER WHEN THERE IS A SCREENSHOT IN IT, on the same rule the hover panel uses — 560px reads well
for prose and starves an image, 720px is the ceiling the popover already uses for image content,
and there is no third number to keep in step. The class is set from the DOM once the content is
in (help-snippets.js), not from the snippet record, so a body whose image arrived via a tutorial
is treated the same way.
max-width:100% still clamps to the modal's padded box (the viewport less 32px), and max-height
with the scrolling content area keeps Continue / Close / "Do not show me this again" on screen
without scrolling to them. */
.help-snippet-modal.has-image .help-snippet-modal-inner {
width: 720px;
}
.help-snippet-modal-inner {
background: #ffffff;
border-radius: 6px;
box-shadow: 0 8px 30px rgba(0,0,0,.3);
width: 560px;
max-width: 100%; /* phone: fill the viewport rather than overflow it */
max-height: 85vh;
display: flex;
flex-direction: column;
}
.help-snippet-modal-content {
padding: 18px;
overflow-y: auto; /* long bodies scroll INSIDE the card, never the page sideways */
overflow-x: hidden;
}
.help-snippet-modal-actions {
padding: 12px 18px;
border-top: 1px solid rgba(0,0,0,.12);
display: flex;
flex-wrap: wrap; /* phone: buttons stack instead of overflowing */
gap: 8px;
align-items: center;
}
.help-snippet-modal-actions .help-snippet-never {
margin-left: auto;
font-size: 12px;
}
.help-snippet-full {
display: inline-block;
margin-top: 10px;
font-size: 13px;
}
/* Phone. The nav dropdown rows are already tight; give the icon a real tap target and let the
action row go full width so "Do not show me this again" is not a 2mm target beside two buttons. */
@media (max-width: 576px) {
.help-snippet-icon {
font-size: 14px;
padding: 8px;
margin: -8px -8px -8px 2px; /* grow the hit area without moving the glyph */
}
.help-snippet-modal-actions {
flex-direction: column;
align-items: stretch;
}
.help-snippet-modal-actions .help-snippet-never {
margin-left: 0;
text-align: center;
}
.help-snippet-modal-inner {
max-height: 90vh;
}
}
/* Dark mode — follows the house body.dark-mode convention and the --dark-mode-* vars. Without this
the panel and the modal keep a white card with dark text on an otherwise dark page. */
body.dark-mode .help-snippet-topic,
body.dark-mode .help-snippet-body {
color: var(--dark-mode-text);
}
body.dark-mode .help-snippet-icon {
color: #8fa8cc;
}
body.dark-mode .help-snippet-icon:hover,
body.dark-mode .help-snippet-icon:focus {
color: #ffffff;
}
body.dark-mode .help-snippet-actions {
border-top-color: rgba(255,255,255,.18);
}
body.dark-mode .help-snippet-modal-inner {
background: var(--dark-mode-secondary);
color: var(--dark-mode-text);
}
body.dark-mode .help-snippet-modal-actions {
border-top-color: rgba(255,255,255,.18);
}
/* ZR-10255 (Daniel #5): the collections worksheet's conditional date groups (.custom-dates-div /
.days-unpaid-div) carry BOTH .hide and Bootstrap's .d-flex. Bootstrap ships
".d-flex { display: flex !important; }", so it beat the global ".hide { display: none; }" and both
the custom-date fields and the days-unpaid fields were on screen at once, whichever radio was picked.
Scoped to .filter-bar on purpose. Do NOT put !important on the global .hide -- it is used app-wide and
that would be a blast-radius change. The alternative, dropping .d-flex from those three divs, was
rejected: it fixes the hidden state by changing the VISIBLE one (align-items-center goes dead and the
label/input pair loses its vertical centering inside the fixed 35px bar). .filter-bar exists only on the
collections worksheet (the invoice bar and the status-log bar), so this rule cannot reach anything else. */
.filter-bar .hide {
display: none !important;
}
/* process-invoices.php — in-place feedback after an invoice is sent.
The row stays on screen until a refresh (the list filters on an empty DateProcessed), so without
this the only signal was a checkbox clearing and a date input quietly filling in the far-right
column. Muted + a green check makes "done" readable at a glance against the rows still pending. */
tr.invoice-row-sent {
opacity: .55;
}
tr.invoice-row-sent td {
text-decoration: line-through;
text-decoration-color: rgba(0,0,0,.35);
}
tr.invoice-row-sent td:first-child,
tr.invoice-row-sent td:last-child {
text-decoration: none; /* keep the check and the PDF link legible */
}
tr.invoice-row-failed {
background: rgba(220,53,69,.10);
}
body.dark-mode tr.invoice-row-sent td {
text-decoration-color: rgba(255,255,255,.4);
}
body.dark-mode tr.invoice-row-failed {
background: rgba(220,53,69,.22);
}
/* LPS-10372 — footer under a Linked Files table. Compact by design (Chris): the first version put
the count hard-left and the nav hard-right, which read as two competing halves and left nowhere
obvious for the zip control. Now: zip pinned left, count + nav together as small centred text.
The empty right cell is what keeps the middle optically centred.
a252 — the left cell was a fixed 60px, sized for a lone icon. It now holds a labelled control, so
the two outer cells are equal FLEXIBLE spacers instead: they split whatever the middle does not
use, which keeps the count optically centred at any label width rather than at one hard-coded one.
The middle no longer grows (0 1 auto), or it would push itself off centre. wrap is the safety
valve — on a narrow viewport the row breaks instead of overflowing the table. */
.att-table-pager {
display: flex;
align-items: center;
flex-wrap: wrap;
row-gap: 6px;
margin: -10px 0 10px 0;
font-size: 85%;
}
.att-table-pager .att-pager-left,
.att-table-pager .att-pager-right {
flex: 1 1 0;
min-width: 60px;
display: flex;
align-items: center;
}
.att-table-pager .att-pager-right { justify-content: flex-end; }
.att-table-pager .att-pager-mid {
flex: 0 1 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
white-space: nowrap;
}
.att-table-pager .att-pager-btn {
width: 28px;
padding: 1px 0;
line-height: 1.2;
}
.att-table-pager .att-pager-input {
width: 52px;
display: inline-block;
text-align: center;
padding: 1px 2px;
height: auto;
}
/* a252 — the clickable unit is the icon AND its label, so both are inside .att-zip and .att-zip is
what carries the colour, the cursor and the zipping state. zipOrderFiles() toggles .zipping on
whichever element it was handed, which is now this span. */
.att-table-pager .att-zip {
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1;
color: #17a2b8;
cursor: pointer;
opacity: 0.85;
white-space: nowrap;
}
.att-table-pager .att-zip:hover { opacity: 1; text-decoration: underline; }
.att-table-pager .att-zip.zipping { opacity: 0.4; cursor: progress; text-decoration: none; }
.att-table-pager .att-zip-icon { font-size: 16px; line-height: 1; }
/* Tutorial disclaimer (ZR-10113) — the demonstration-data notice that renderTutorialHtml() puts at
the top of every tutorial a viewer opens. ONE muted line; the full two paragraphs hang off the (i)
in a house popover. Deliberately secondary: it is read once, before the tutorial starts, so it has
to be legible without pushing the content the user came for down the page. Neither string is here
— both live in the central DB, in admin_settings.tutorial_disclaimer(_summary), so they can be
reworded with no deploy. The PDF export renders none of this. */
.tutorial-disclaimer {
margin: 0 0 16px 0;
padding: 0 0 10px 0;
border-bottom: 1px solid #e6e8eb;
color: #6b7280;
font-size: 11px;
line-height: 1.45;
}
/* The (i). Styling has to live here rather than inline because popover() emits its own style
attribute on the trigger, so an inline style of ours would be dropped. */
.tutorial-disclaimer-more {
margin-left: 4px;
color: #3f8edb;
font-size: 12px;
vertical-align: baseline;
white-space: nowrap;
}
.tutorial-disclaimer-more:hover {
color: #2a6fb5;
}
/* The popover panel is shared markup on document.body, so it is targeted through the paragraphs it
carries rather than through a wrapper of ours. Two full paragraphs at the panel default line
height read as a wall; this is the same 1.45 as the summary line. */
.custom-popover-v2 p {
line-height: 1.45;
}
/* Dark mode — help-snippet.php flips its card to --dark-mode-secondary, so the light grey above
would drop to an unreadable contrast there. Follows the house body.dark-mode convention. The
popover panel keeps its own white background, so its text is left alone. */
body.dark-mode .tutorial-disclaimer {
color: #a2a9b3;
border-bottom-color: rgba(255, 255, 255, .18);
}
body.dark-mode .tutorial-disclaimer-more {
color: #8fa8cc;
}
/* Right-click menu on PDF icons carrying data-pdf-edit (JS/pdf-edit-menu.js).
Matches the admin hub's ticket-rail menu so the two feel like the same product. */
#pdfEditContextMenu {
display: none;
position: fixed;
/* Above .custom-popover-v2, which positionPopoverV2() puts at 99999. At 9000 the menu opened
BEHIND the attachment popover, so only the half hanging past the panel was clickable. */
z-index: 100000;
min-width: 180px;
background: #1f2937;
color: #f1f5f9;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.28);
font-size: 13px;
padding: 4px 0;
user-select: none;
}
#pdfEditContextMenu .ctx-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 14px;
cursor: pointer;
white-space: nowrap;
gap: 10px;
}
#pdfEditContextMenu .ctx-item:hover {
background: rgba(255,255,255,0.08);
}
#pdfEditContextMenu .ctx-item i {
opacity: 0.6;
}
/* ZR-10385: the position beside the three set items - "3 of 47" - so nobody has to click one to
find out how big the set is or where in it they are about to land. The .ctx-item above is
already a space-between flex row, so a second span needs nothing but its own weight to sit on
the right. */
#pdfEditContextMenu .ctx-note {
opacity: 0.55;
font-size: 12px;
white-space: nowrap;
}
/* ZR-10385: the hairline between the two triads - three ways to open ONE order, then three ways
to open the SET. Six unbroken items read as a list you have to parse; six in two groups of
three read as a grid you can aim at.
A BORDER ON THE FIRST ITEM OF THE SECOND GROUP, not a separator element. This is the same
construction Bootstrap's own .dropdown-divider uses (a top rule spanning the menu's full width
inside its 4px 0 padding), and building it out of the row that is already there means there is
nothing extra in the DOM to focus, tab into or mis-click. The ticket-rail menu in the admin hub
that this look came from has no separator of its own, so there was no house one to reuse.
No theme guard: the menu paints #1f2937 in both light and dark (zr-dark.css only re-asserts the
same chrome), so one translucent white rule suits both. Set just above the 0.08 hover so it
reads as a rule and never as a heavy line. */
#pdfEditContextMenu .ctx-item.ctx-sep {
border-top: 1px solid rgba(255,255,255,0.12);
margin-top: 4px;
padding-top: 10px;
}
/* a243: the caption line that marks a menu as a TIER-0 control.
Chris: "Maybe it is a different colour, or maybe it just says that... I just
want it to be obvious so that Daniel sees it, but knows that it is not
something everybody sees when he does."
ONE SIGNAL DOING BOTH HALVES. It says it in words, and it is the only
coloured thing in an otherwise grey menu, so it reads as a marking rather
than as another command. A badge on the table or a tinted row would have been
a second and a third signal for the same fact, on a screen he reads all day.
Amber deliberately matches the simmed-window banner further down this file,
so the thing that opens a sim and the window it opens are the same colour.
It is NOT a .ctx-item and must never be styled like one: no hover, no pointer,
nothing that invites the click it cannot answer. See openMenu() in
shared/JS/pdf-edit-menu.js for why that also makes it inert. */
#pdfEditContextMenu .ctx-head {
padding: 6px 14px 7px;
margin-bottom: 4px;
border-bottom: 1px solid rgba(255,255,255,0.12);
color: #fbbf24;
font-size: 11px;
font-weight: 600;
letter-spacing: .03em;
text-transform: uppercase;
white-space: nowrap;
cursor: default;
}
/* Version-history modal (JS/pdf-edit-menu.js). The default table let the action column take the
leftover width, which wrapped "205 KB" onto two lines and stacked View above Restore. */
#pdf-versions-modal .pdf-versions-table th,
#pdf-versions-modal .pdf-versions-table td {
vertical-align: middle;
}
/* A size and a pair of buttons are never worth wrapping. */
#pdf-versions-modal .pdf-versions-table td:nth-child(3),
#pdf-versions-modal .pdf-versions-table td:nth-child(4),
#pdf-versions-modal .pdf-versions-table th:nth-child(3) {
white-space: nowrap;
}
/* Keep the date and its "original" badge on one line. */
#pdf-versions-modal .pdf-versions-table td:first-child {
white-space: nowrap;
}
#pdf-versions-modal .pdf-versions-table .badge {
vertical-align: 1px;
font-weight: 500;
}
/* ZR-10335: the live document is marked as the one in use, so the row can name its author like
every other row instead of spending the name column saying "current document". Nothing here tints
a row any more - the tint rule went in 66b5bc1 and table-striped went with it, because the live
row is always row 1 and zebra striping therefore always landed on exactly the row Daniel asked us
to stop highlighting. */
#pdf-versions-modal .pdf-versions-mark {
width: 26px;
padding-right: 0;
text-align: center;
}
/* Secondary to the name it sits under, not a second name. */
#pdf-versions-modal .pdf-versions-restored {
font-size: 0.75rem;
color: #6c757d;
line-height: 1.3;
}
/* Muted rather than green: it marks a row, it does not warn about one. */
#pdf-versions-modal .pdf-versions-inuse {
color: #8a9099;
cursor: default;
}
#pdf-versions-modal .pdf-versions-table .btn {
margin-left: 4px;
}
/* A full name is one thing, not two lines. The column is the flexible one, so this only bites when
the name is genuinely longer than the space - and a row that grows is better than one that lies. */
#pdf-versions-modal .pdf-versions-table td:nth-child(2) {
white-space: nowrap;
}
/* A 22x22 icon is a small thing to ask a pointer to hit exactly. Padding the link that wraps it
enlarges the right-click target without moving the icon: the padding is symmetric and the negative
margin gives the space back to the row, so the column looks identical. */
a:has(> [data-pdf-edit]) {
display: inline-block;
padding: 6px 8px;
margin: -6px -8px;
}
/* Attachment rows inside a status-log popover. The whole row is the target - icon, name and the space
between - so a right-click does not depend on hitting an 18px image. */
.custom-popover-v2 tr[data-pdf-edit]:hover,
.custom-popover-v2 tr[onclick]:hover {
background: rgba(0,0,0,0.05);
}
/* Record-history icon in a profile modal header. Dim by default so it does not compete with the
title, full strength on hover so it is obviously interactive once you go looking for it. */
.record-history-icon {
color: #b6bec9;
font-size: 14px;
margin-left: 9px;
vertical-align: 1px;
transition: color 0.12s ease;
}
/* popover() writes cursor:pointer inline, which beats a plain class rule. This is not a link and
nothing navigates - help is the honest cursor for it - so this one needs the override. */
.record-history-icon[data-popover-v2] {
cursor: help !important;
}
/* Darkens rather than changing hue - it stays a quiet affordance even while you are using it. */
.record-history-icon:hover {
color: #6c757d;
}
/* ZR-10325: the green dot on a report that has not been opened yet. Clears when the REPORT is
opened, not when the menu is - see reportNavOptions(). Inline-block with a fixed width so the
labels line up whether or not a dot is present. */
.report-nav-new {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: #28a745;
margin-right: 7px;
vertical-align: middle;
flex: 0 0 auto;
}
.report-nav-item:not(.report-nav-unviewed) .report-nav-new { display: none; }
/*
* ZR-10349 — the client profile tab strip fits eleven tabs on one line.
*
* Adding Production pushed Contact and Attorney to 1079px inside a 1066px strip, so one tab wrapped.
* Measured overflow was 13px; trimming 3px of horizontal padding per side recovers ~66px across the
* eleven, which leaves headroom for a longer label later.
*
* Scoped to this strip on purpose: the main site nav uses the same Bootstrap classes, and the modal
* is the only place carrying this many tabs. Widening the modal again was the alternative, and it is
* already wider than its content needs.
*/
.nav-tabs.client-profile-tabs .nav-item {
margin-left: 7px;
}
.nav-tabs.client-profile-tabs .nav-item:first-child {
margin-left: 0;
}
.nav-tabs.client-profile-tabs .nav-link {
padding-left: 13px;
padding-right: 13px;
white-space: nowrap;
}
/* ============================================================================
REPORT SETUP - the chosen report's description (ZR-10389)
============================================================================
One quiet line under the Report dropdown saying what the report actually does,
so nobody has to run one to find out. The text is FileMaker's
ReportTypes::ReportDescription, carried to the browser on each