/* ========================================= BREADCRUMB ========================================= Behavior: registry-driven trail rendered into the topbar. Visual: Untitled-UI-style — single thin row, all segments equally weighted, chevron-right separators between them. Replaces what used to be the page title in the header. */ /* ─── Root + desktop list (md+) ─────────── */ .dmu-bc-root { display: flex; align-items: center; min-width: 0; } .dmu-bc-list { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; /* line-height: 1 collapses Bootstrap's body line-height (~19.6px) inherited from , so the inline formatting context inside the

baselines relative to each other. */ line-height: 1; } .dmu-bc-item { display: inline-flex; align-items: center; position: relative; } /* Leaf segment truncates with ellipsis when its label exceeds 50ch. Ancestor segments stay full so the trail's structure is always readable; only the current page's name (often the longest, since it can be a freeform entity name) is allowed to clip. The label's own max-width drives the ellipsis — flex-shrink/min-width on the item make the leaf shrinkable in case the row is constrained, even though the cap on the label is what triggers the ellipsis in the common case. Ancestor items inherit the default flex-shrink: 1 but their .dmu-bc-link has white-space: nowrap with no overflow rule, so they push the row width rather than truncating. */ .dmu-bc-list .dmu-bc-item:last-child { min-width: 0; flex-shrink: 1; } .dmu-bc-list .dmu-bc-item:last-child .dmu-bc-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50ch; } /* ─── Segment link ─────────── */ .dmu-bc-link { display: inline-flex; align-items: center; text-decoration: none; padding: 4px 8px; border-radius: 6px; color: var(--body, #1f2937); font-size: 0.875rem; font-weight: 500; /* line-height: 1 collapses the text line-box to font-size so the text segment's height matches the home-icon segment's height within rounding error. Without this, the inherited 1.4 line-height inflates text segments by ~5px and the list's align-items: center has nothing to do because the row's vertical center isn't where the text's optical center sits. */ line-height: 1; /* Multi-property transition so the primary-color hover shift on linkable segments (rule below) animates smoothly along with the existing background-color fade. */ transition: background-color 120ms ease, color 120ms ease; white-space: nowrap; } .dmu-bc-link:hover, .dmu-bc-link:focus { text-decoration: none; } .dmu-bc-label { display: inline-block; /* Assert line-height: 1 on the span itself, not just on the link parent. Some upstream CSS (Bootstrap typography defaults, or inherited body line-height) can re-inflate the span's line-box even when the link is line-height: 1, which pushes the text baseline below where the flex center would put a 14px box. */ line-height: 1; } /* Hover affordance only on segments with sibling-jump enabled. Static segments and the leaf without siblings stay visually inert. */ .dmu-bc-item[data-bc-clickable="1"] .dmu-bc-link { cursor: pointer; } .dmu-bc-item[data-bc-clickable="1"] .dmu-bc-link:hover, .dmu-bc-item.is-open .dmu-bc-link { background: color-mix(in srgb, var(--body, #1f2937) 7%, transparent); } /* Hover color shift to brand primary for every segment that links somewhere actionable. Two paths in: 1. :not(:last-child) — every segment EXCEPT the leaf. Home and middle segments always navigate to a parent page. 2. [data-bc-clickable="1"] — any segment with sibling-jump, INCLUDING a leaf that has siblings (e.g. a company view page where the leaf opens a list of other companies). A non-clickable leaf has neither marker and stays inert on hover (the global a:hover would normally tint it secondary; we explicitly leave that case alone since hovering "you are here" with no destination is meaningless). The .is-open clause keeps the dropdown's parent segment colored while the dropdown is open. The .dmu-bc-label span inside the link is targeted explicitly because relying on inheritance was leaving the label gray on hover. (0,4,0) class-scoped specificity beats the global a:hover (0,1,1). */ .dmu-bc-item:not(:last-child) .dmu-bc-link:hover, .dmu-bc-item:not(:last-child) .dmu-bc-link:focus, .dmu-bc-item:not(:last-child) .dmu-bc-link:hover .dmu-bc-label, .dmu-bc-item:not(:last-child) .dmu-bc-link:focus .dmu-bc-label, .dmu-bc-item[data-bc-clickable="1"] .dmu-bc-link:hover, .dmu-bc-item[data-bc-clickable="1"] .dmu-bc-link:focus, .dmu-bc-item[data-bc-clickable="1"] .dmu-bc-link:hover .dmu-bc-label, .dmu-bc-item[data-bc-clickable="1"] .dmu-bc-link:focus .dmu-bc-label, .dmu-bc-item.is-open .dmu-bc-link, .dmu-bc-item.is-open .dmu-bc-link .dmu-bc-label { color: var(--primary, #6f42c1); } /* ─── Down-caret next to clickable segments ─────────── */ /* The caret is part of the segment's visual unit — same color as the segment text, NOT the muted separator gray. Size matches the separator so the row reads as visually consistent. */ .dmu-bc-caret { /* !important defeats Lucide's inline width/height attributes on the rendered