LostDocsPanel Documentos c/ erro 5 cols .validation-queue-wrap
EmailLog Escalações 5 cols .validation-queue-wrap
EmailLog Silenciados 3 cols .validation-queue-wrap
Every `nth-child(N)` width and per-column fix below was written for the
7-column queue. Unscoped, they land on a DIFFERENT column in the other
three: the 92px "Data" pin became a "Reprocessar"/"Ação" pin, the 13%
"Trabalhador" width became the "Motivo" width, and the Motivo wrap opt-out
protected a column LostDocs does not have. Measured consequences at 960px
before this split: LostDocs' failure reason clipped mid-word and its whole
"Recebido" date hidden under the opaque sticky action cell; Escalações'
"A resolver…" button painted over the Motivo text; Silenciados' "Todos os
alertas silenciados" badge cut to "● Todos".
SO: `.validation-queue-table` is now CHROME ONLY — fixed layout, wrapping,
the sticky-right action column, header treatment, row-state tints. Anything
that names a COLUMN POSITION belongs on a per-table modifier.
`--cols7` carries the 7-column geometry verbatim (queue + Validados render
byte-identically to before the split). The modifier was added to EVERY
column rule in the SAME selector position, so all pairwise specificity
relationships between those rules are unchanged.
The three shorter tables get their own explicit rules further down.
⚠ Never add a bare `.validation-queue-table td:nth-child(N)` rule again.
───────────────────────────────────────────────────────────────────────── */
/* 7 cols: Ficheiro | Tipo | Trabalhador | Subempreiteiro | Data | Motivo | Ações.
Percentages sum <100; Motivo (no width set) absorbs the slack so the table always
fills the wrapper without overflowing it. */
.validation-queue-table--cols7 th:nth-child(1), .validation-queue-table--cols7 td:nth-child(1) { width: 20%; }
.validation-queue-table--cols7 th:nth-child(2), .validation-queue-table--cols7 td:nth-child(2) { width: 11%; }
.validation-queue-table--cols7 th:nth-child(3), .validation-queue-table--cols7 td:nth-child(3) { width: 13%; }
.validation-queue-table--cols7 th:nth-child(4), .validation-queue-table--cols7 td:nth-child(4) { width: 13%; }
.validation-queue-table--cols7 th:nth-child(5), .validation-queue-table--cols7 td:nth-child(5) { width: 8%; }
.validation-queue-table--cols7 th:nth-child(7), .validation-queue-table--cols7 td:nth-child(7) { width: 112px; }
/* nowrap01 item C — the three SHORTER consumers, each stating its own geometry.
Idiom: give a px width only to the "chrome" columns whose content has a known
intrinsic size (a dd/mm/yyyy date, a button row); leave the prose columns
width-less so `table-layout: fixed` splits the remainder between them. That
way these tables degrade by narrowing TEXT, which wraps, instead of squeezing
a nowrap date or an un-shrinkable button until it paints over its neighbour —
which is exactly what the borrowed 7-column widths did to them.
All figures below verified in Chromium (real Pico padding 11.25px/15px, ink
measured with a DOM Range) at 1440/1280/1024/960/768; see the DECISIONS doc
at fermiobra/docs/table-layout-spec/DECISIONS.md. */
/* The 760px floor on the shared class is sized for the SEVEN-column queue
("below this the wrapper scrolls instead of crushing cells"). Inherited by a
5- or 3-column table it forces a horizontal scroll that is not needed, and
because the last cell is sticky and opaque the columns it hides sit under it
at rest — at a 960px viewport (≈625px of usable width) that silently ate
LostDocs' "Recebido" and Escalações' "Criado" columns entirely. Give each
short table a floor sized for ITS columns; below that they still scroll.
⚠ DO NOT LOWER THESE below ~760px. A UI review caught the trap: at a 768px
viewport `.main-content` gives these tables 723px, so a 700px floor put them
just ABOVE their floor — no scroll, and the columns crush instead. Measured at
700px: the wrapper's scrollWidth equalled its clientWidth (723 = 723, i.e. no
scroll at all), Ficheiro and Subempreiteiro fell to 102px each, and a normal
filename shredded into an 11-line ribbon inside a 247px mostly-blank row. The
3-column Silenciados survives at 730px only because 730 > 723 and it therefore
still scrolls. The floor's job is to force the SCROLL, so it must stay ABOVE
the narrowest content width these tables are ever handed.
⚠ These are the SAME specificity (0,1,0) as `.validation-queue-table
{ min-width: 760px }` above, so they win on SOURCE ORDER alone. Keep this
block BELOW that rule — hoisting it silently restores the 7-column floor. */
.validation-queue-table--lost5 { min-width: 760px; }
.validation-queue-table--escalations5 { min-width: 760px; }
.validation-queue-table--silenced3 { min-width: 730px; }
/* LostDocsPanel — 5 cols: Ficheiro | Subempreiteiro | Motivo | Recebido | Ações.
Motivo carries a `.badge` (`white-space: nowrap`, ~178px of ink) that the
inherited 13% "Trabalhador" width crushed to a 98.7px column at 960px, where
it ran 109px past its cell and was then CLIPPED mid-word by the opaque sticky
action cell — the operator could read "● Process" and nothing else. 30% keeps
it whole down to THIS table's 760px floor (below), where 32% is ~213px of
content box against ~178px of badge ink. The extra margin over 30% is
deliberate: `REASON_LABELS` maps only two reasons and LostDocsPanel falls
back to the RAW `doc.reason` string for anything unmapped, which can be
longer than either mapped label — and the clip that used to hide that is
gone. Recebido/Ações are pinned so the date and the "A reprocessar…" button
are never the thing that gives. */
.validation-queue-table--lost5 th:nth-child(3), .validation-queue-table--lost5 td:nth-child(3) { width: 32%; }
.validation-queue-table--lost5 th:nth-child(4), .validation-queue-table--lost5 td:nth-child(4) { width: 112px; }
.validation-queue-table--lost5 th:nth-child(5), .validation-queue-table--lost5 td:nth-child(5) { width: 175px; }
/* EmailLog Escalações — 5 cols: Subempreiteiro | Obra | Motivo | Criado | Ação.
The 32% on Obra replaces the inline `style={{ width: '40%' }}` that used to
live on the | (D-10's "give OBRA the flexible share"): a column width
split between JSX and CSS is the same class of trap as this whole item. Obra
went 40% -> 32%; the eight points it gives up buy the Ação column a cell its
button actually fits in (the inherited 92px "Data" pin left "A resolver…"
16.6px past its cell and over the Motivo text at 1280, 41.3px at 960) and
keep Subempreiteiro/Motivo above ~109px at the 700px floor, which is the
tightest point in this table. At 1440 Obra is still ~355px. */
.validation-queue-table--escalations5 th:nth-child(2), .validation-queue-table--escalations5 td:nth-child(2) { width: 32%; }
.validation-queue-table--escalations5 th:nth-child(4), .validation-queue-table--escalations5 td:nth-child(4) { width: 112px; }
.validation-queue-table--escalations5 th:nth-child(5), .validation-queue-table--escalations5 td:nth-child(5) { width: 145px; }
/* A date and a button label are single-line by nature. For Escalações this
replaces the per- | inline `whiteSpace: 'nowrap'` (one source of truth) and
also covers the body cells, which the inline version never did. The action
columns are sized so their busiest label — the pending states "A
reprocessar…" / "A resolver…", which are LONGER than the resting ones — fits
on that one line; the resting label then has slack, which is the right way
round. Without the nowrap the button box itself wrapped to three lines. */
.validation-queue-table--escalations5 th:nth-child(4),
.validation-queue-table--escalations5 td:nth-child(4),
.validation-queue-table--escalations5 th:nth-child(5),
.validation-queue-table--escalations5 td:nth-child(5),
.validation-queue-table--lost5 th:nth-child(4),
.validation-queue-table--lost5 td:nth-child(4),
.validation-queue-table--lost5 th:nth-child(5),
.validation-queue-table--lost5 td:nth-child(5) { white-space: nowrap; }
/* The shared `.validation-queue-table td { overflow-wrap: anywhere }` exists for
column 1's unbroken FILENAMES; on ordinary Portuguese prose it fractures words
mid-syllable ("Construçõe/s Silva", "respost/a ao pedido") — the same
pathology B1-NEW-1 fixed for the queue's Motivo column with `break-word`,
which unlike `anywhere` is not counted in min-content sizing and so still
breaks a genuinely over-long token. Apply that same opt-out to every prose
column of the three short tables. Only LostDocs col 1 carries filenames, so
it is the one cell here that keeps `anywhere`. */
.validation-queue-table--lost5 td:nth-child(2),
.validation-queue-table--lost5 td:nth-child(3),
.validation-queue-table--escalations5 td:nth-child(1),
.validation-queue-table--escalations5 td:nth-child(2),
.validation-queue-table--escalations5 td:nth-child(3),
.validation-queue-table--silenced3 td:nth-child(1),
.validation-queue-table--silenced3 td:nth-child(2) {
overflow-wrap: break-word;
word-break: normal;
}
/* EmailLog Silenciados — 3 cols: Subempreiteiro | O que está silenciado | Ação.
Only three columns, so the 7-column percentages left column 2 at 11% (189.8px
at 960) and its "Todos os alertas silenciados" badge was cut to "● Todos" by
the sticky action cell — the column whose entire job is to say WHAT is muted.
Pin the two-button action cell; the two text columns split the rest. */
.validation-queue-table--silenced3 th:nth-child(3), .validation-queue-table--silenced3 td:nth-child(3) { width: 270px; }
/* Pin the actions column to the right edge so "Rever" is always visible, even
before the operator scrolls the wrapper. Opaque backgrounds hide the row cells
that scroll underneath; the hover tints mirror the row-hover rules above
(.clickable-row:hover = rgba(33,242,192,0.06) ≈ #f2fefb composited on white). */
.validation-queue-table th:last-child,
.validation-queue-table td:last-child {
position: sticky;
right: 0;
text-align: right;
}
.validation-queue-table thead th:last-child { background: var(--ol-gray-50); z-index: 6; }
/* Below the sticky header (z 5/6) so it scrolls under the header row, but its own
sticky stacking context already floats it over the non-pinned cells in its row. */
/* The actions cell stays opaque white on hover — the row itself is not
clickable, so there is no row-level hover tint to mirror (only the "Rever"
button shows its own hover state). */
.validation-queue-table tbody td:last-child { background: #fff; z-index: 1; }
/* T1 (valpopup1): the Motivo column (col 6) holds reason badges (.flag-line).
nowrap01-b made wrap the `.flag-line` DEFAULT (was: scoped here alone,
because the shared rule used to force nowrap and overflow the cell under
the opaque, sticky Ações column). `display: flex` is still cell-specific:
it puts each reason badge on its own line (one flag per Motivo cell)
instead of shrink-to-fitting to max-content, which is what gives this cell
a real line edge to break against — see the "flex iff single flag" rule at
`.flag-dot`'s declaration. Because it has that edge, `overflow-wrap:
break-word` is re-asserted here (the base `.flag-line` now uses `anywhere`
for the shrink-to-fit multi-flag case — see the base rule's comment): a
Motivo reason is prose with spaces, and `anywhere` would shatter it
character-by-character the same way it shatters a date, which is exactly
what `break-word` exists to avoid. The maxWidth:320 wrapper div + per-rule
`title` tooltips are preserved. Dot first-line alignment is now baked into
the base `.flag-dot` rule. */
.validation-queue-table--cols7 td:nth-child(6) .flag-line { display: flex; overflow-wrap: break-word; }
/* name_imp identity group-header band (Part C2) — header-tweak pass.
#1 THINNER: tighter vertical padding than a normal body cell (0.75rem) so the
band reads as a slim divider strip, not a chunky row.
#2 NEAR-WHITE: a very subtle grey (gray-50, #f9fafb) instead of the heavier
table-head grey (#f1f5f9) — just enough to set the band apart.
#3 NAME = BODY TEXT: the band's | keeps the inherited tbody font-size
(0.9rem) / weight (normal), so the most-complete name in its leading
matches a regular cell; the muted identifier/count chips style themselves. */
.validation-queue-table tbody tr.validation-queue-row--identity-header td {
padding: 0.3rem 1rem;
background: var(--ol-gray-50, #f9fafb);
border-bottom: 1px solid var(--ol-gray-100);
text-align: left;
}
/* Left-aligned flat band; real horizontal spacing between segments via gap
(inline margins read as cramped). align-items:baseline so the body-size name
and the smaller muted chips share a text baseline. */
.identity-header-band {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-start;
gap: 0.1rem 0.6rem;
}
/* nowrap01-b follow-up (coordinator finding, wave 1 UI review): the label was
scrolling out of view horizontally while the sticky actions column
(td:last-child) stayed pinned on the right — a band that reads "6
documentos" is meaningless once its own label has scrolled off. Every band
type shares `.identity-header-band` (fan-out / identity / relationship), so
pin it here once rather than per band. `left` matches the td's own
1rem horizontal padding (above) so the label doesn't touch the scroller's
edge; the nearest `overflow-x: auto` ancestor is `.table-scroll__viewport`,
which is what `position: sticky` measures `left` against. */
.identity-header-band > span:first-child {
position: sticky;
left: 1rem;
}
/* WS4 relationship band (D-XDU-1/2) — deliberately the OUTERMOST band: a
fan-out or identity band can still be drawn INSIDE the same run. Before
this rule it shared `.validation-queue-row--identity-header td` above with
every OTHER band and rendered pixel-identical to the bands nested inside
it — a UI reviewer measured a "6 documentos" relationship band looking
like it presided over a single row, because nothing distinguished
"container" from "content". A blue accent (border + tint, same family as
the app's other informational bands — see `.cp-panel` above) reads as a
distinct, larger-scope container; the top+bottom border (vs. the plain
band's bottom-only) frames it as something that OPENS a section rather
than a slim inline divider. Same (0,2,3) specificity as the shared rule
above and placed after it, so this wins on source order without needing
`!important`. */
.validation-queue-table tbody tr.validation-queue-row--relationship-band td {
background: var(--ol-blue-bg, #eff6ff);
border-top: 2px solid var(--ol-blue-border, #bfdbfe);
border-bottom: 1px solid var(--ol-blue-border, #bfdbfe);
padding-top: 0.45rem;
padding-bottom: 0.45rem;
}
/* Same reasoning applied to the LABEL text itself, so the whole band —
text included — reads in the accent colour, not just its background. */
.validation-queue-row--relationship-band .identity-header-band .text-muted {
color: var(--ol-blue-700, #1d4ed8);
}
/* The row that CLOSES a relationship run used to carry the exact same 2px
gray `--cluster-divider` border as leaving an ordinary identity cluster —
also flagged by the wave-1 review as indistinguishable, even though a
relationship run is the OUTER container and closing it is the bigger
boundary. `relRunDividerBefore` (Validation.tsx) is a subset of
`dividerBefore`'s three OR'd causes (new cluster / left a fan-out run /
left a relationship run), so BOTH `--cluster-divider` and
`--rel-run-divider` land on the row whenever the relationship-run cause
fires. Rather than rely on source order to break the tie (fragile — the
next edit that reorders these two rules silently flips which one wins),
this selector requires BOTH classes, which raises its specificity above
`--cluster-divider` alone (0,3,3 vs 0,2,3) and wins unconditionally. */
.validation-queue-table tbody tr.validation-queue-row--cluster-divider.validation-queue-row--rel-run-divider td {
border-top: 3px solid var(--ol-blue-border, #bfdbfe);
}
/* "Identidade agrupada" review-pane panel (ClusterProvenancePanel).
Lives in the NARROW right-hand review column (.validation-right, ~1fr of the
1.15fr/1fr .validation-shell split), so every text run — worker names, doc-type
names, NIF/NISS digits — must be able to break inside the box rather than spill
out of it. All styling is here rather than inline so the whole card can be read
(and adjusted) in one place. Light-theme only (Pico overridden).
Renders inline in the review-pane fieldset — NOT inside the overflow:hidden
queue table — so no portal/fixed positioning is needed. */
.cp-panel {
max-width: 100%;
box-sizing: border-box;
overflow-wrap: anywhere;
word-break: break-word;
background: var(--ol-blue-bg, #eff6ff);
border: 1px solid var(--ol-blue-border, #bfdbfe);
border-radius: 8px;
margin-bottom: 0.75rem;
font-size: 0.85rem;
line-height: 1.45;
}
/* Header row: chevron + title, the whole strip clickable. `min-width:0` on the
button AND the title is what actually lets the title wrap — without it the flex
item takes its max-content width and overflows the card. */
.cp-toggle {
display: flex;
align-items: baseline;
gap: 0.45rem;
width: 100%;
min-width: 0;
box-sizing: border-box;
padding: 0.5rem 0.6rem;
margin: 0;
background: none;
border: none;
border-radius: 8px;
cursor: pointer;
font: inherit;
text-align: left;
color: inherit;
}
.cp-toggle:hover { background: var(--ol-blue-100, #dbeafe); }
.cp-toggle:focus-visible { outline: 2px solid var(--ol-blue, #2563eb); outline-offset: -2px; }
/* CSS-drawn triangle (no emoji glyph) — rotates to point down when open. */
.cp-chevron {
display: inline-block;
flex: 0 0 auto;
width: 0;
height: 0;
/* Pin to the FIRST line of the title. A long merged name wraps the title to 2-3
lines; centring the chevron against the whole block parked it beside line 2. */
align-self: flex-start;
margin-top: 0.4rem;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 5px solid var(--ol-blue-hover, #1d4ed8);
transition: transform 0.15s ease;
}
.cp-chevron--open { transform: rotate(90deg); }
.cp-title { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
/* The merged name is supporting detail, not a second heading — de-emphasise it so
the count reads first and a long name doesn't shout. */
.cp-title-name { font-weight: 400; color: var(--ol-gray-600, #4b5563); }
.cp-detail {
padding: 0 0.6rem 0.55rem;
border-top: 1px solid var(--ol-blue-border, #bfdbfe);
margin-top: 0.1rem;
padding-top: 0.5rem;
}
/* Shared small-caps label for the two sections ("associado a:", "Campos usados:")
so the card has one obvious hierarchy instead of two ad-hoc muted lines. */
.cp-section-label {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ol-gray-500, #6b7280);
margin-bottom: 0.35rem;
}
.cp-siblings {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
/* Each sibling is its own card: the doc link + badge on line 1, the reason it
grouped on line 2. Two lines beats one wrapped line here — in a column this
narrow the badge and the "— reason" tail used to wrap into a ragged blob. */
.cp-sibling {
min-width: 0;
overflow-wrap: anywhere;
display: flex;
flex-direction: column;
gap: 0.1rem;
padding: 0.35rem 0.45rem;
border: 1px solid var(--ol-blue-border, #bfdbfe);
border-radius: 6px;
background: #fff;
}
.cp-sibling-main {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
min-width: 0;
}
/* `.link-button` carries no rules of its own — these used to be inline styles, and
inline beat Pico's `button` defaults for free. As a class they must undo them
explicitly, `width:auto` above all: Pico stretches a bare button to 100%, which
would knock the "validado" badge onto its own line. */
.cp-sibling-link {
min-width: 0;
width: auto;
padding: 0;
margin: 0;
background: none;
border: none;
cursor: pointer;
font: inherit;
font-weight: 500;
line-height: inherit;
text-align: left;
overflow-wrap: anywhere;
color: var(--ol-blue-hover, #1d4ed8);
text-decoration: underline;
}
.cp-sibling-name { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
/* The "why it grouped" reason is supporting evidence — it must sit UNDER the doc
name in the visual hierarchy, not compete with it. */
.cp-sibling-detail { font-size: 0.78rem; color: var(--ol-gray-500, #6b7280); }
.cp-sibling-detail strong { font-weight: 500; color: var(--ol-gray-600, #4b5563); }
/* The badge must not be squeezed by a long doc label beside it. */
.cluster-sibling-validado { flex: 0 0 auto; font-size: 0.7rem; white-space: nowrap; }
/* Separate the "Campos usados" block from the siblings list with a divider +
breathing room, giving the panel a clear two-section hierarchy. */
.cp-fields {
margin-top: 0.6rem;
padding-top: 0.5rem;
border-top: 1px solid var(--ol-blue-border, #bfdbfe);
}
.cp-fields-list { list-style: none; margin: 0; padding: 0; }
/* label + value on one line, provenance on its own muted line beneath: the source
doc name is the longest string in the card and must never crowd the value. */
.cp-field {
min-width: 0;
overflow-wrap: anywhere;
padding: 0.25rem 0;
}
.cp-field + .cp-field { border-top: 1px dashed var(--ol-blue-border, #bfdbfe); }
.cp-field-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.35rem;
min-width: 0;
}
.cp-field-label { flex: 0 0 auto; font-weight: 600; color: var(--ol-gray-700, #374151); }
.cp-field-value { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cp-field-src { display: block; font-size: 0.78rem; color: var(--ol-gray-500, #6b7280); }
.cp-field-src strong { font-weight: 500; color: var(--ol-gray-600, #4b5563); }
/* #3 NAME MATCHES THE BAND: the most-complete name carries the SAME
`text-xs text-muted` styling as the identifier/DOB/count chips (David: same
font, size, AND colour as the rest of the band — it must not read bigger).
The `.identity-header-name` class is kept only as a stable test/render hook
and intentionally sets NO font of its own, so the utility classes win. */
/* #4 DIVISION after a cluster: a row that starts a new (solo or other) group
right after a multi-member cluster gets a top border, closing the cluster off
visually so the rows don't blur together. Flat — no indentation. The sticky
actions cell (td:last-child) carries its own opaque background, so the border
is applied to every cell of the row to read across the full width. */
.validation-queue-table tbody tr.validation-queue-row--cluster-divider td {
border-top: 2px solid var(--ol-gray-200);
}
/* name_imp Part C3: a row the operator detached via "Separar do grupo" stays in
place (it no longer teleports to its own recency slot). Mark it as pulled aside
— a faint tint + a left accent bar — so it reads as "spun out of the group
above" rather than vanishing, with the reversible "Voltar a agrupar" control on
the row. The tint is applied to every cell so it reads across the sticky actions
cell; the accent bar rides the first cell (inset shadow, so it never widens the
fixed-layout column). */
.validation-queue-table tbody tr.validation-queue-row--detached td {
background: var(--ol-gray-50, #f9fafb);
}
.validation-queue-table tbody tr.validation-queue-row--detached td:first-child {
box-shadow: inset 3px 0 0 var(--ol-gray-400, #9ca3af);
}
/* fix-queue-layout (bughunt0707 B1-P1-1 / B1-P2) — scoped to the Validation
queue + Validados tables. These used to lean on `.table-scroll` ANCESTRY to
mean "the 7-column tables"; since nowrap01 item C they also carry the
explicit `--cols7` modifier, so the scoping states what it means and a
future around a 5-column sibling cannot silently inherit
7-column geometry. The `.table-scroll` prefix is retained on every one of
them so the specificity ordering against the later `--cols7` overrides
(the 92px col-5 / 14% col-4 block) is exactly what it was. */
/* B1-P1-1: the Data / "Verificado em" column was 8% — ≈61px at the 760px table
min-width, while a nowrap "06/07/2026" needs ~78px + 2rem cell padding, so
the date painted over the Motivo cell (text-on-text). Fixed px width sized
for the full date + padding (mirrors the 112px Ações column). */
.table-scroll .validation-queue-table--cols7 th:nth-child(5),
.table-scroll .validation-queue-table--cols7 td:nth-child(5) {
width: 112px;
}
/* similarbugs-nowrap-cell-overflow §2.1 — the SAME cell also carries the
validator's email, on a second line, when an admin unchecks "Mostrar apenas
as validações deste utilizador" (Validation.tsx, `scope === 'all'`). That
line is not a date and does not fit: `david.matias@fermi.pt` measures ~146px
in this column's 82px content box, and it inherited the cell's `nowrap` —
which is here for the DATE, not for it. So it painted ~64px past the cell and
over the neighbouring "Estado" flag: two strings on top of each other, in the
one column whose job is to say who verified the document. Width-independent,
because the column is pinned in px.
Undo the inherited nowrap for this line only — the date above it keeps its
nowrap and its 112px pin.
`white-space: normal` is the load-bearing half. The `overflow-wrap` line
RE-ASSERTS a value this cell already inherits from
`.validation-queue-table td { overflow-wrap: anywhere }` (above), so removing
it changes nothing today — it is defence-in-depth against that inherited rule
being narrowed later, and it documents at the point of use that this value
MUST be able to break mid-token. Keep the two declarations together.
⚠ Do not read this as contradicting the doc-list Validade rule, which
deliberately overrides the same inherited `anywhere` DOWN to `break-word`.
The two cells want opposite things and both are right: the Validade label is
ordinary prose whose words must stay whole (`anywhere` shattered a date into
one character per line), whereas an email address is a single unbreakable
token — per-character breaking is the only way it can fit at all, and there
is nothing to preserve by refusing to split it.
The element also carries a `title` with the full address, so a wrapped value
stays hoverable and copyable. */
.table-scroll .validation-queue-table--cols7 td:nth-child(5) .verified-by-email {
white-space: normal;
overflow-wrap: anywhere;
}
/* B1-P2-2: header words no longer fracture mid-word at narrow widths
("SUBEMPREITEI/RO", "TRABALH/ADOR"). Wrapping at spaces stays allowed; an
unbreakable-too-long word ellipsizes on its line instead (the th carries a
`title` with the full text).
nowrap01 item C: this used to be scoped `.table-scroll …`, so it only ever
reached the queue + Validados; the three unwrapped consumers kept fracturing
("SUBEM/PREITE/IRO" on LostDocs at 960px, measured). Mid-word fracture in a
table head is wrong on all five, and this rule names no column, so it is
chrome — promoted to the shared class. */
.validation-queue-table thead th {
overflow-wrap: normal;
word-break: normal;
hyphens: none;
overflow: hidden;
text-overflow: ellipsis;
}
/* B1-P2-3: while columns are still hidden beneath the OPAQUE sticky Ações
cell (TableScroll toggles `--more` off once fully scrolled), cast a soft
left-edge inset shadow on it so Motivo text disappearing under the pinned
column reads as "scroll for more", not broken truncation. This replaces the
right-edge fade cue (cue={false}) which would wash the pinned column out. */
.table-scroll--more .validation-queue-table thead th:last-child,
.table-scroll--more .validation-queue-table tbody td:last-child {
box-shadow: inset 12px 0 10px -10px rgba(3, 5, 49, 0.3);
}
/* B1-NEW-1 (bughunt0713, HIGH): at the old 760px table floor the fixed columns
(20+11+13+14% + 112px Data + 112px Ações) consumed 665px, leaving Motivo —
the width-less slack absorber — exactly 95px. `overflow-wrap: anywhere` then
shredded the triage reason into a 9–15-line tower with mid-word fractures
("Tipo / descon / hecido"), whose height set every row's height: ~3 giant,
mostly-blank rows per laptop screen. Two-part fix, scoped via `.table-scroll`
ancestry (queue + Validados only — EmailLog reuses `.validation-queue-table`
UNWRAPPED with different columns and must keep the 760px base floor):
1) raise the floor so Motivo is guaranteed ≥ ~179px (0.42×960 − 224). The
wrapper h-scrolls sooner on laptops, but the sticky Ações column + the
B1-P2-3 inset-shadow cue are the designed affordance for that — readable
after a scroll beats unreadable always. */
.table-scroll .validation-queue-table--cols7 {
min-width: 960px;
}
/* 2) Motivo wraps at word boundaries — normal spaced Portuguese reasons never
fracture mid-word (the pathology B1-P2-2 fixed for headers, reintroduced in
body cells by the global `td { overflow-wrap: anywhere }`, which stays for
col 1's unbroken filenames). `break-word` (NOT `normal`): a genuinely
unbreakable token longer than the ~179px column — a long filename/code
embedded in a reason — still breaks to a new line rather than being CLIPPED
by the pre-existing `td:nth-child(6){overflow:hidden;text-overflow:ellipsis}`
(styles.css ~5321, which can't ellipsize wrapped multi-line flag content).
Unlike `anywhere`, `break-word` breaks are NOT counted in min-content sizing,
so normal-length words keep wrapping only at spaces. overflow-wrap inherits,
so the .flag-line badges follow. */
.table-scroll .validation-queue-table--cols7 td:nth-child(6) {
overflow-wrap: break-word;
word-break: normal;
}
/* B1-NEW-7 (bughunt0713): the uppercase letter-spaced "SUBEMPREITEIRO" header
needs ~130px of content box; at 14% it ellipsized ("SUBEMPREITEI…") even on
a full 1440 desktop. Grant col 4 two more percent where the table is wide
enough to spare it (Motivo keeps ≥ ~240px there); below 1200px the ellipsis
+ the existing th `title` tooltip remain the intended degradation. */
@media (min-width: 1200px) {
.table-scroll .validation-queue-table--cols7 th:nth-child(4),
.table-scroll .validation-queue-table--cols7 td:nth-child(4) {
width: 16%;
}
}
/* Forecast "Previsão" (projected) table: ONE single read-only table that uses
the app's plain base look (same as the main email log) — NOT the
validation-queue 7-col fixed/sticky layout, which squashed columns and pinned
the wrong cell when reused here. Rows from different days share one table,
separated by a full-width day header row. */
.forecast-table { width: 100%; }
.forecast-table .nowrap { white-space: nowrap; }
/* Full-width day separator inside the single forecast table. */
.forecast-day-row td {
background: var(--ol-gray-50, #f9fafb);
font-weight: 600;
font-size: 0.85rem;
color: var(--ol-gray-600, #4b5563);
border-top: 1px solid var(--ol-gray-200, #e5e7eb);
}
/* ========================================================================
Modo demonstração (demo / privacy mode)
------------------------------------------------------------------------
Privacy in demo mode is now enforced ENTIRELY SERVER-SIDE: when the mode is
on, the frontend sends `X-Demo-Mode: 1` (src/api.ts) and the backend
`DemoMaskMiddleware` (backend/app/demo_mask.py) redacts personal data out of
every JSON response before it reaches the browser. There is deliberately NO
client-side CSS censoring anymore — no grey redaction bars over table values
/ names / NIFs / emails / form fields, and no blur on document images. The
data simply arrives already masked, so nothing needs to be hidden visually.
The only thing left here is the floating "modo demonstração ativo" badge so
the operator can see at a glance that the mode is on (and click to turn it
off). `src/lib/demoMode.ts` still toggles the `demo-censor` class on
as a state marker, but no rule targets it.
======================================================================== */
/* Floating "modo demonstração ativo" badge — always legible (.demo-keep),
above all content, and a one-click off switch. */
.demo-mode-badge {
position: fixed;
left: 1rem;
bottom: 1rem;
z-index: 9999;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.8rem;
font-size: 0.8rem;
font-weight: 600;
line-height: 1;
color: #fff;
background: #b91c1c;
border: 1px solid #fca5a5;
border-radius: 999px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
cursor: pointer;
width: auto;
margin: 0;
}
.demo-mode-badge:hover { background: #991b1b; }
/* ===========================================================================
Unified email table ("Caixa de emails") — email-unified-table-redesign Layer 1
One filterable table with three time buckets (Previsão / Agora / Histórico).
=========================================================================== */
/* Filter area above the table — row 1 holds the dropdown selectors, rows 2-3
hold the checkbox groups full-width so a growing dynamic Tipo list wraps
downward and never overflows to the right (#4). */
.email-filter-bar {
display: flex;
flex-direction: column;
gap: 0.7rem;
margin-bottom: 0.85rem;
padding: 0.75rem 0.9rem;
background: var(--ol-gray-50, #f9fafb);
border: 1px solid var(--ol-gray-200, #e5e7eb);
border-radius: 10px;
}
.email-filter-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.25rem;
align-items: flex-start;
}
/* Checkbox groups stack one per line, each full-width, so their inner checkboxes
wrap within the row instead of pushing past the right edge. */
.email-filter-row--checks {
flex-direction: column;
gap: 0.55rem;
border-top: 1px solid var(--ol-gray-200, #e5e7eb);
padding-top: 0.6rem;
}
.email-filter-group {
display: flex;
flex-direction: column;
gap: 0.3rem;
min-width: 0;
}
.email-filter-group--wide { width: 100%; }
.email-filter-clear {
margin-left: 0.4rem;
padding: 0;
border: 0;
background: none;
color: var(--ol-blue-600, #2563eb);
font-size: 0.7rem;
text-transform: none;
letter-spacing: 0;
cursor: pointer;
text-decoration: underline;
}
/* Held-email batch-approve toolbar (the "Aprovar todos / selecionados" row). */
.email-batch-row > td {
background: var(--ol-gray-50, #f9fafb);
border-bottom: 1px solid var(--ol-gray-200, #e5e7eb);
padding: 0.5rem 0.75rem;
}
.email-batch-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.email-batch-hint {
font-size: 0.72rem;
}
.email-held-check {
vertical-align: middle;
cursor: pointer;
}
.email-filter-group > .email-filter-label {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--ol-gray-500);
}
.email-filter-checks {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 0.85rem;
}
.email-filter-check {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.85rem;
white-space: nowrap;
cursor: pointer;
}
.email-filter-check input { margin: 0; cursor: pointer; }
/* emails-active-alert-star: "* = alerta ativo" legend under the Tipo checks.
Small top margin so it hugs the Tipo group it describes rather than floating
midway to the Estado group. */
.email-filter-legend {
margin: 0.2rem 0 0;
font-size: 0.75rem;
}
.email-filter-group select { max-width: 16rem; }
/* combobox-unify: the email filter selects are now controls. */
.email-filter-group .ol-combobox { max-width: 16rem; }
/* "Alertas ativos" summary panel (#5). */
.alertas-ativos {
margin-bottom: 0.85rem;
padding: 0.55rem 0.9rem;
background: var(--ol-gray-50, #f9fafb);
border: 1px solid var(--ol-gray-200, #e5e7eb);
border-radius: 10px;
font-size: 0.85rem;
}
.alertas-ativos > summary {
cursor: pointer;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.alertas-ativos-count {
font-size: 0.75rem;
color: var(--ol-gray-500);
}
.alertas-ativos-body { margin-top: 0.6rem; }
.alertas-ativos-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.6rem;
}
.alertas-ativos-inactive { margin-top: 0.5rem; }
.alertas-ativos-hint { margin: 0.55rem 0 0; font-size: 0.78rem; }
/* Involved workers/documents shown above a projection's preview body (#6). */
.email-preview-entities {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.3rem 0.5rem;
margin-bottom: 0.55rem;
font-size: 0.82rem;
}
.email-preview-chip {
display: inline-block;
max-width: 100%;
padding: 0.1rem 0.5rem;
background: var(--ol-indigo-50, #eef2ff);
border: 1px solid var(--ol-gray-200, #e5e7eb);
border-radius: 999px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* An obra/sub with no (or invalid) recipient — red so the gap is obvious (#6a). */
.email-preview-chip--missing {
background: var(--ol-red-bg, #fef2f2);
border-color: var(--ol-red, #dc2626);
color: var(--ol-red, #dc2626);
}
/* Bucket separator rows inside the unified table. */
.email-bucket-row td {
background: var(--ol-gray-100, #f3f4f6);
font-weight: 600;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ol-gray-600);
padding: 0.4rem 0.75rem;
}
.email-bucket-row--previsao td { background: var(--ol-blue-50, #eff6ff); }
.email-bucket-row .email-bucket-count {
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--ol-gray-500);
margin-left: 0.4rem;
}
/* Projection rows read as a lighter "preview". */
.email-row--projection td { color: var(--ol-gray-600); }
.email-row--projection .email-cell-when { font-style: italic; }
/* EMAIL Layer 3 — a projection the operator cancelled (suppressed). Struck
through + dimmed so it reads as "won't send" while staying visible + reversible
(Repor). The action cell is left untouched so the Repor button stays legible. */
.email-row--suppressed td:not(:last-child) {
text-decoration: line-through;
opacity: 0.55;
}
/* Secondary recipient line under a sub name. */
.email-cell-recipient {
display: block;
font-size: 0.78rem;
color: var(--ol-gray-500);
margin-top: 0.1rem;
}
/* folha-ponto #19 — forecast recipient-count badges. They carry a full
sentence, and yellow needs the darker text token for AA contrast at 12px.
A suppressed row's line-through doesn't propagate into the badge's
inline-flex box — set it explicitly so a cancelled row's badge reads
cancelled too.
nowrap01-b: the white-space:normal + line-height:1.3 this rule used to
restore against a nowrap base are now what `.badge` sets by default —
removed here as redundant, not as a behavior change. */
.badge--recipient-count.badge--yellow {
color: var(--ol-yellow-text);
}
.email-row--suppressed .badge--recipient-count {
text-decoration: line-through;
}
/* Pager footer for the Histórico bucket. */
.email-pager {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
margin-top: 0.6rem;
font-size: 0.85rem;
color: var(--ol-gray-600);
}
/* Unified email table — horizontal scroll on narrow viewports so the dense
6-column layout never clips columns off-screen (mirrors .validation-queue-wrap).
min-width keeps the columns readable; the wrapper scrolls instead. */
.email-table-wrap { overflow-x: auto; }
.email-table { min-width: 760px; }
/* ══════════════════════════════════════════════════════════════════════════
uipolish7 css-modals-tables-misc — FIX-5 table sizing / sticky actions.
Appended here (after the base validation-queue + email table rules) so these
same-specificity overrides win by source order. Owns the MODAL/TABLE region;
does NOT touch the form-control region (css-form-controls' lane).
════════════════════════════════════════════════════════════════════════ */
/* FIX-5 · E-01 / B-06 — validation queue: give the Data column a firm width so
it stops bleeding onto the Motivo badge (illegible overlap at ~768px).
col order: Ficheiro|Tipo|Trabalhador|Subempreiteiro|Data|Motivo|Ações
⚠ This 92px pin is the single clearest illustration of handoff item C: it was
keyed on the bare class, so it also pinned LostDocsPanel's "Recebido" column,
Escalações' "Ação" BUTTON column and Silenciados' "Ação" column to 92px. The
`--cols7` modifier is what stops that. The Motivo-clipping half of E-01/B-06
is gone; see the comment where it used to be, just below. */
.validation-queue-table--cols7 th:nth-child(5),
.validation-queue-table--cols7 td:nth-child(5) {
width: 92px;
white-space: nowrap;
}
/* nowrap01 item C — `overflow: hidden; text-overflow: ellipsis` REMOVED from
this cell (was FIX-5 E-01/B-06's "clip an over-long Motivo instead of letting
it push under the sticky Ações column").
Four reasons, in order of weight:
1. It never ellipsized anything. `text-overflow` applies to a SINGLE-LINE
overflow; this cell holds a wrapped multi-line `.flag-line` block, so the
declaration only ever produced a SILENT clip with no affordance. The
B1-NEW-1 comment above already treats it as a hazard to design around
("still breaks to a new line rather than being CLIPPED by the pre-existing
td:nth-child(6){overflow:hidden}"), not as a feature.
2. It contradicts the decision on record for this family — these cells WRAP,
they do not truncate. A UI reviewer measured the alternative for the
sibling "Verificado em" cell: an ellipsis at 82px shows `david.matia…`,
strictly less information than a two-line wrap. Same argument here, where
the clipped string is the operator's triage reason.
3. It is redundant for its stated purpose. The Ações cell to its right is
`position: sticky` with an opaque background and its own z-index, so it
already paints over any rightward spill, and `.table-scroll__viewport`
clips whatever passes the table edge.
4. It made the column structurally UNMEASURABLE: e2e/layout-overflow.spec.ts
skips a clipped anchor whole (clipped ink cannot overprint), so the wrap
opt-out two rules above could never be discriminated by the detector — the
spec stayed green with the opt-out deleted and the label 582px past its
box. Removing the clip converts a blind site into a measured one.
Measured no-op today, at the fixture's long Motivo reason: ink is −15.6px
(1440) / −10.1px (1280) / −20.1px (1024, 960, 768) with the clip and without
it, because the `break-word` rule above already guarantees the fit. It only
changes what happens when that guarantee BREAKS — which is precisely when it
must be visible. Column 6 of Validados ("Estado") wore the same clip and is
covered by the same reasoning.
⚠ ACCEPTED, MEASURED COST — do NOT "fix" it by restoring the clip. `break-word`
breaks are not counted in min-content sizing, and the label is an anonymous
flex item (of the `display: flex` on `.flag-line`) whose automatic minimum
size is therefore its longest unbreakable token. So a Motivo reason carrying
a ≥~45-char unbreakable token — reachable via `validationErrorLabel`'s
fallback to the full interpolated rule message, or `manualReasonLabel`'s
verbatim passthrough — cannot shrink, and now spills past the table's rounded
right edge onto the page background instead of being clipped at the cell
(measured at a 1024px viewport: the scrollport's scrollWidth goes 960 -> 1001,
so ~41px of tail floats outside the card and `--more` keeps its "scroll for
more" shadow lit). Not reachable at 1440/1280. This is a deliberate trade:
the old behaviour DESTROYED that text silently with no ellipsis (the content
is multi-line, so `text-overflow` never fired), whereas now it is ugly but
readable and scrollable — and the detector reports it. The clean fix belongs
to handoff item B, which reworks `.flag-line` itself: give the label a real
flex item with `min-width: 0` (or drop the flex layout) and the token breaks
instead of either spilling or being clipped.
The Data-column half of FIX-5 E-01/B-06 (the 92px pin below) is unaffected. */
/* E-03 — the "Subempreiteiro" header is a long single word; keep it on one line
(with a hair more column) so it stops wrapping to two rows in the head. */
.validation-queue-table--cols7 th:nth-child(4),
.validation-queue-table--cols7 td:nth-child(4) { width: 14%; }
.validation-queue-table--cols7 th:nth-child(4) { white-space: nowrap; }
/* B-13 — the last queue row's "Rever" sat under the floating chat FAB. Clear it
with bottom padding on the scroll wrapper (padding, so it stays inside the
rounded scroller and doesn't add an outer gap).
NB since nowrap01 item C this also applies to LostDocsPanel, which gained
`.validation-queue-wrap`. Deliberate, not collateral: the SupportWidget FAB is
global, LostDocs' last row carries a "Reprocessar" button, and the EmailLog
tables that already wore this class have had the same 72px for as long. A
bespoke opt-out would be a third behaviour to keep in sync for no gain. */
.validation-queue-wrap { padding-bottom: 72px; }
/* D-01 — "Caixa de emails" table: pin the Ações column to the right edge exactly
like the validation queue, so the row actions stay visible instead of being
cut mid-button (1440px) or hidden entirely (1280px). The two full-width
colSpan rows (bucket separators, batch-approve toolbar) keep their own
background — exclude them so the sticky white/grey fill doesn't paint over
them. */
.email-table { overflow: visible; } /* base `table` sets overflow:hidden (corner clip) which would break the sticky cell; the wrapper is the scrollport */
.email-table-wrap { border-radius: 10px; }
.email-table thead th:last-child,
.email-table tbody tr:not(.email-bucket-row):not(.email-batch-row) td:last-child {
position: sticky;
right: 0;
text-align: right;
/* scroll-affordance: a soft left-edge shadow so the pinned Ações column reads
as floating over content that scrolls beneath it (the D-01 affordance). */
box-shadow: -6px 0 6px -6px rgba(15, 23, 42, 0.18);
}
.email-table thead th:last-child { background: var(--ol-gray-50); z-index: 6; }
.email-table tbody tr:not(.email-bucket-row):not(.email-batch-row) td:last-child {
background: #fff;
z-index: 1;
}
/* D-09 — doc-types table (Settings): the Validade cell held long validity-kind
labels that wrapped to 2–3 lines, bouncing row height 34–100px. Keep it on
one line. Scoped via `:has(td code)` so it hits ONLY the doc-types table (the
sole `.settings-users-table` whose first column renders a element) —
the shared-class users/samples tables are untouched. */
.settings-users-table:has(td code) td:nth-child(4) { white-space: nowrap; }
/* --- Folha de Ponto results: mobile card layout (P3 #18) ---
The results table is a grouped table (entry header row + one row per
candidate + optional expanded-docs row), so it can't reuse
table.responsive-cards verbatim — the group rows must stay full-width
labels while only candidate rows become cards. Mirrors the
responsive-cards card chrome (border, radius, shadow). Likely used on a
phone at the obra gate. */
@media (max-width: 768px) {
table.roster-results,
table.roster-results tbody {
display: block;
}
table.roster-results thead {
display: none;
}
/* Entry group header — a plain full-width label between cards. */
table.roster-results tbody tr.roster-group-row,
table.roster-results tbody tr.roster-note-row {
display: block;
}
table.roster-results tbody tr.roster-group-row td,
table.roster-results tbody tr.roster-note-row td {
display: block;
background: transparent !important;
border: none !important;
padding: 0.6rem 0.25rem 0.25rem;
}
/* Candidate rows become cards: worker info on top, estado bottom-left,
ação top-right. */
table.roster-results tbody tr:not(.roster-group-row):not(.roster-note-row):not(.roster-expanded-row) {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.25rem 0.75rem;
padding: 0.75rem;
margin-bottom: 0.5rem;
border: 1px solid var(--ol-gray-200);
border-radius: 8px;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
table.roster-results tbody tr:not(.roster-group-row):not(.roster-note-row):not(.roster-expanded-row) td {
padding: 0;
border: none;
}
/* Pico sets list-style on the LI, so the warnings 's inline
listStyle:none doesn't reach it — with td padding zeroed the square
markers would float in the gutter outside the card border. */
table.roster-results tbody td ul,
table.roster-results tbody td ul li {
list-style: none;
}
table.roster-results tbody tr:not(.roster-group-row):not(.roster-note-row):not(.roster-expanded-row) td:nth-child(1) {
grid-column: 1;
grid-row: 1 / 3;
}
table.roster-results tbody tr:not(.roster-group-row):not(.roster-note-row):not(.roster-expanded-row) td:nth-child(2) {
grid-column: 1 / -1;
grid-row: 3;
font-size: 0.85rem;
}
table.roster-results tbody tr:not(.roster-group-row):not(.roster-note-row):not(.roster-expanded-row) td:nth-child(3) {
grid-column: 2;
grid-row: 1;
text-align: right;
}
/* Expanded docs row — full-width panel attached under its card. */
table.roster-results tbody tr.roster-expanded-row {
display: block;
margin: -0.5rem 0 0.5rem;
border: 1px solid var(--ol-gray-200);
border-top: none;
border-radius: 0 0 8px 8px;
background: #fff;
}
table.roster-results tbody tr.roster-expanded-row td {
display: block;
border: none;
}
}
/* =========================================================================
imp_plan1 Point 1 P1a — global entity popup (nav-stack breadcrumb + body).
Disjoint region appended at EOF so it never collides with concurrent
styles.css edits (valpopup-affordances / imp-p3-css). Uses the existing
.row-detail-back button style; only adds the breadcrumb trail layout + the
placeholder body (P1b–P1f replace the body with real panels). Responsive:
the breadcrumb wraps on narrow viewports rather than overflowing.
========================================================================= */
/* imp_plan3 T7 — canonical back/breadcrumb chrome shared by BOTH nav-stack
pop-up hosts (the global entity popup AND the validador). Promoted from the
former .entity-popup-breadcrumb* rules and now the SINGLE stylesheet behind
; the validador's old inline breadcrumb styles are migrated
onto these classes so the two hosts no longer drift. */
.frame-nav-header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-2, 0.5rem);
font-size: 0.85rem;
margin-bottom: 0.85rem;
}
.frame-nav-header__trail {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.15rem;
min-width: 0;
color: var(--ol-gray-600, #475569);
}
.frame-nav-header__crumb {
display: inline-flex;
align-items: center;
}
/* The "›" separator lives inside the FOLLOWING crumb (before its label); the
surrounding JSX whitespace collapses in HTML, so space it explicitly on both
sides instead of relying on the trail `gap` (which only spaces crumb wrappers,
leaving the chevron flush against its own label). */
.frame-nav-header__crumb [aria-hidden='true'] {
margin: 0 0.25rem;
}
.frame-nav-header__trail button {
background: none;
border: none;
padding: 0;
font: inherit;
color: var(--ol-accent-ink, #0b7a63); /* a11y: raw accent text ~1.45:1 on white */
cursor: pointer;
text-decoration: underline;
}
.frame-nav-header__trail button:disabled {
cursor: default;
opacity: 0.6;
text-decoration: none;
}
.frame-nav-header__trail [aria-current='page'] {
font-weight: 600;
color: var(--ol-primary, #030531);
}
.frame-nav-header__reset {
margin-left: auto;
}
.entity-popup-placeholder {
padding: var(--sp-4, 1rem);
color: var(--ol-gray-700, #334155);
}
.entity-popup-placeholder code {
font-size: 0.85em;
word-break: break-all;
}
.entity-popup-placeholder__note {
color: var(--ol-gray-500, #64748b);
font-size: 0.85rem;
}
/* ── Combobox (searchable selector) ───────────────────────────────────────
Reusable searchable dropdown replacing native |