layout. */
.hide-zero-rows .bwa-tree tbody tr:has(td.currency):not(:has(td.currency:not(.zero))) {
display: none;
}
/* Visual de-emphasis for "essentially zero" currency cells:
- .near-zero: sub-euro amounts that would round to 0 (rendered with cents)
- td.currency.zero: exact-zero values and the '--' (unavailable) placeholder
Both read as "nothing here" without removing the actual content. */
.near-zero,
.bwa-tree td.currency.zero .cell-content {
font-size: 0.78em;
color: var(--app-fg-muted);
opacity: 0.75;
}
.bwa-tree {
--tree-guide-color: var(--app-accent-yellow);
--tree-guide-width: 1.5rem;
--tree-guide-radius: 5px;
td.label .cell-content {
display: flex;
align-items: center;
gap: 0;
}
.guide {
display: inline-block;
position: relative;
width: var(--tree-guide-width);
align-self: stretch;
flex: 0 0 var(--tree-guide-width);
margin-top: -10px;
margin-bottom: -10px;
}
/* Pass-through: ancestor still has siblings below, draw a full-height line. */
.guide-through::before {
content: "";
position: absolute;
background: var(--tree-guide-color);
width: 1px;
top: 0;
bottom: 0;
left: 50%;
}
/* `.guide-gap` is a pure spacer (outer ancestor with no continuing line);
it inherits its width from `.guide` and needs no rules of its own. */
/* Elbow ├ : vertical line spans the full row height (so the next sibling's
line continues), plus a short horizontal stub at the row's vertical
center to connect to the chevron/label. */
.guide-elbow::before {
content: "";
position: absolute;
background: var(--tree-guide-color);
width: 1px;
top: 0;
bottom: 0;
left: 50%;
}
.guide-elbow::after {
content: "";
position: absolute;
background: var(--tree-guide-color);
height: 1px;
top: 50%;
left: 50%;
right: 0;
}
/* Elbow └ (last child): vertical only spans top→middle and the corner is
rounded — same trick as the CodePen's li:last-of-type:before. */
.guide-elbow-last::before {
content: "";
position: absolute;
border-left: 1px solid var(--tree-guide-color);
border-bottom: 1px solid var(--tree-guide-color);
border-bottom-left-radius: var(--tree-guide-radius);
background: transparent;
top: 0;
bottom: 50%;
left: 50%;
right: 0;
}
/* Tighten label padding so guides start flush with the cell edge.
Scoped to .bwa-tree so the controlling income statement is untouched. */
td.label {
padding-left: 0;
}
td.label .cell-content>a {
margin-left: 0.25rem;
text-decoration: none;
@media (hover: hover) and (pointer: fine) {
&:hover {
text-decoration: underline;
}
}
}
td.label .cell-content>.tree-toggle-icon {
margin-left: 0.25rem; color: var(--app-accent-yellow);
background-color: var(--hc-ink-600);
border-radius: var(--app-radius-xs);
font-size: var(--app-text-xs);
padding: 0 0.125rem;
}
/* Result/summary rows have no guide spans; restore left padding so the
label doesn't sit flush against the table edge. */
tr[class*="results-row"] td.label {
padding-left: 0.5rem;
}
/* Depth-based colour gradient for summary (parent) rows. Levels 0–3 use the
hex codes from the design (which map exactly to existing --hc-ink/--hc-sage
tokens). Levels 4+ continue the natural sage progression. Leaf rows fall
through to the existing .area / .account styles in application.css.
Levels 0–1 are dark enough that the label needs light text + light link +
light guide-line color; levels 2+ are light enough that the standard dark
foreground works. Each tr scopes its own --tree-* tokens, which the
summary cells, link, and guide pseudo-elements all read. */
tbody {
tr[data-tree-depth="0"] {
--tree-row-bg: var(--hc-ink-600);
/* #50594C */
--tree-text-color: var(--app-fg-on-inverse);
--tree-link-color: var(--app-fg-on-inverse);
}
tr[data-tree-depth="1"] {
--tree-row-bg: var(--hc-ink-500);
/* #83947C */
--tree-text-color: var(--app-fg-on-inverse);
--tree-link-color: var(--app-fg-on-inverse);
}
tr[data-tree-depth="2"] {
--tree-row-bg: var(--hc-ink-300);
/* #C1CFBA */
--tree-text-color: var(--app-fg);
--tree-link-color: var(--app-link);
}
tr[data-tree-depth="3"] {
--tree-row-bg: var(--hc-sage-400);
/* #CDD9C7 */
--tree-text-color: var(--app-fg);
--tree-link-color: var(--app-link);
}
tr[data-tree-depth="4"] {
--tree-row-bg: var(--hc-sage-300);
--tree-text-color: var(--app-fg);
--tree-link-color: var(--app-link);
}
/* tr[data-tree-depth="5"] {
--tree-row-bg: var(--hc-sage-200);
--tree-text-color: var(--app-fg);
--tree-link-color: var(--app-link);
} */
/* tr[data-tree-depth="6"],
tr[data-tree-depth="7"] {
--tree-row-bg: var(--hc-sage-100);
--tree-text-color: var(--app-fg);
--tree-link-color: var(--app-link);
} */
/* Apply the gradient on the | s of summary rows. application.css's
`.table-results tbody tr.summary-row-{final,revenue} td` rule has
specificity (0,2,3) and is loaded after this file, so we need to win
on specificity — adding [data-tree-depth] + [class*="summary-row"] to
the tr part bumps us to (0,4,3). */
tr[data-tree-depth][class*="results-row"] td {
background-color: var(--tree-row-bg);
color: var(--tree-text-color);
font-weight: 500;
}
/* Link colour adapts to the row's depth so the label stays readable
against its banded background. */
tr[data-tree-depth][class*="results-row"] td a {
color: var(--tree-link-color);
}
/* Rounded left corners on each summary row's banded label cell. */
tr[data-tree-depth][class*="results-row"] td.label {
border-top-left-radius: var(--app-radius-sm);
border-bottom-left-radius: var(--app-radius-sm);
}
/* Lighter font on leaf rows than the shared 600 in application.css.
Same specificity trick as the summary-row td rule — the [data-tree-depth]
attribute selector pushes us above (0,2,3) so application.css doesn't
win on source order. */
tr.area[data-tree-depth] td {
font-weight: 400;
}
/* "Operativer Cash-flow" sits after the final result row. A thicker top
border creates the "slightly separated" visual gap without extra markup. */
tr.results-row-operative-cashflow td {
border-top: 3px solid var(--app-bg);
}
}
} |