@conduction/nextcloud-vue 2.78.0 → 2.80.0

package/dist/esm/nextcloud-vue.css

@@ -79,9 +79,14 @@
  * counterpart default to one.
  */
 .cn-look-board {
-	/* Page content area: padding, max width, gap between blocks. */
+	/* Page content area: padding, max width, gap between blocks. The content
+	   spans the whole content area (screens-one-scroller-parity): grids grow
+	   with the window and shrink only when the sidebar takes its share. A
+	   1240px cap left dead space right of the content, and on a dashboard,
+	   which scrolled itself, put the scrollbar beside the content instead of
+	   at the window edge. */
 	--cn-board-content-padding: 24px 28px;
-	--cn-board-content-max-width: 1240px;
+	--cn-board-content-max-width: none;
 	--cn-board-section-gap: 20px;
 	/* Buttons and inputs. */
 	--cn-board-control-height: 40px;
@@ -121,6 +126,15 @@
 	gap: var(--cn-board-section-gap);
 }
 
+/* One scroller: the content area. CnDashboardPage scrolls itself
+   (`height: 100%; overflow-y: auto`), which nested a second scrollbar inside
+   NcAppContent's; under the board look the page grows with its widgets and
+   NcAppContent, which already spans to the window edge, scrolls it. */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) {
+	height: auto;
+	overflow-y: visible;
+}
+
 .cn-look-board .cn-index-page:not(.cn-look-nextcloud *) .cn-page-header,
 .cn-look-board .cn-settings-page:not(.cn-look-nextcloud *) .cn-page-header,
 .cn-look-board .cn-index-page:not(.cn-look-nextcloud *) .cn-index-page__below-header,
@@ -213,6 +227,14 @@
 	margin-inline-start: -264px;
 }
 
+/* The navigation draws the line between it and the content. NcContent draws a
+   second one on the content while the navigation is open, which doubled the
+   line and put the page 1px further from the navigation than the board's 28px.
+   Outranks NcContent's rule (six classes) with seven. */
+.cn-look-board .app-navigation[data-testid="cn-nav"]:not(.app-navigation--closed):not(.app-navigation--close) ~ .app-content.app-content {
+	border-inline-start: none;
+}
+
 .cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__content {
 	box-sizing: border-box;
 	gap: 20px;
@@ -222,6 +244,52 @@
 .cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__list {
 	height: auto;
 	flex: 1 1 auto;
+	margin: 0;
+	gap: 2px;
+}
+
+/* No scrollbars inside the navigation (screens-one-scroller-parity).
+   NcAppNavigation gives the region above the list `overflow-y: scroll`, an
+   always-on track (with arrow buttons on classic scrollbars) beside the
+   primary action that has nothing to scroll. It takes its content's height
+   instead. A menu taller than the window still scrolls (wheel, touch, focus),
+   without drawing a bar of its own; the one visible scrollbar is the page's. */
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__body:not(.app-navigation__body--no-list) {
+	flex-shrink: 0;
+	overflow: visible;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__list,
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__body--no-list {
+	scrollbar-width: none;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__list::-webkit-scrollbar,
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__body--no-list::-webkit-scrollbar {
+	display: none;
+}
+
+/* The board's vertical rhythm (AppZijbalk): the primary action 20px from the
+   top, the list 20px under it, entries 2px apart. An empty search slot is a
+   flex child too and pushed everything 20px down, so it goes. */
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__search:empty {
+	display: none;
+}
+
+/* A caption is a 12px label with 6px under it, 20px after the group above
+   and 2px before its first entry. NcAppNavigationCaption gives its name a
+   15px font on a 34px line, which made it 44px high. */
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__list > .app-navigation-caption:not(:first-child) {
+	margin-top: 18px;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-caption .app-navigation-caption__name {
+	margin: 0;
+	padding: 0;
+	font-size: inherit;
+	font-weight: inherit;
+	line-height: normal;
+	color: inherit;
 }
 
 .cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-entry,
@@ -306,6 +374,43 @@
 	font-size: 15px;
 }
 
+/* The footer of the board: Help and Advanced as two 40px rows at weight 400,
+   2px apart. The Help row kept the 42px of a list entry, and the Advanced
+   foldout drew a 34px button inside 4px of padding, 20px under Help. */
+.cn-look-board .app-navigation[data-testid="cn-nav"] .cn-app-nav__footer-list {
+	gap: 2px;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] .cn-app-nav__footer-list .app-navigation-entry,
+.cn-look-board .app-navigation[data-testid="cn-nav"] .cn-app-nav__footer-list .app-navigation-entry-link {
+	min-height: 40px;
+	font-weight: 400;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] [data-testid="cn-nav-settings"] {
+	padding: 0;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] .cn-app-nav__footer-list + [data-testid="cn-nav-settings"] {
+	margin-top: -18px;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] [data-testid="cn-nav-settings"] > :first-child {
+	margin: 0;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] [data-testid="cn-nav-settings"] > :first-child .button-vue {
+	box-sizing: border-box;
+	width: 100%;
+	height: 40px;
+	min-height: 40px;
+	padding: 0 10px;
+	border-radius: 8px;
+	font-size: 15px;
+	font-weight: 400;
+	justify-content: flex-start;
+}
+
 /* The card above the footer, pushed down. */
 .cn-look-board .cn-app-nav__card {
 	order: 0;
@@ -510,6 +615,13 @@
 .cn-look-board .cn-status-badge--primary:not(.cn-status-badge--solid):not(.cn-look-nextcloud *) {
 	color: var(--color-primary-element-light-text);
 }
+
+/* ---- Date and age cells (screens-cell-date-parity) ---------------------- */
+/* The board sets every waiting time ("3 dagen", "4 uur") in weight 600; a
+   late one is red through its variant class. */
+.cn-look-board .cn-cell-renderer__age:not(.cn-look-nextcloud *) {
+	font-weight: 600;
+}
 /*
  * The board dialog (screens-dialog-parity, canon section 5).
  *
@@ -797,6 +909,20 @@
 	min-height: var(--cn-field-height);
 }
 
+/* NcTextField draws its input inside `.input-field__main-wrapper`, which has a
+   FIXED height (`--default-clickable-area`, 34px on Nextcloud 34) and a 2px
+   padding ring for the focus outline. The min-height above makes the input
+   40px, so without this the input overflowed its wrapper by 6px and the help
+   line under it, which starts at the wrapper's bottom edge, sat behind the
+   input's lower border. NcSelect grows with its content, which is why only
+   plain inputs showed it. The wrapper now takes the field height plus its
+   padding ring, so the input fits and the help line starts below it.
+   @spec openspec/changes/form-draft-on-change-and-help-text-spacing/specs/form-draft-on-change-and-help-text-spacing/spec.md#requirement-help-text-starts-below-every-input */
+.cn-look-board .cn-form-dialog__field .input-field__main-wrapper,
+.cn-look-board .cn-form-page__field .input-field__main-wrapper {
+	height: calc(var(--cn-field-height) + 2 * var(--border-width-input-focused, 2px));
+}
+
 .cn-look-board .cn-form-dialog__field textarea,
 .cn-look-board .cn-form-page__field textarea {
 	padding: 10px 12px;
@@ -1262,16 +1388,27 @@
 	margin-inline-start: 0;
 }
 
-/* The first of Save view, Filter and the view switch takes the free space, so
-   the three sit at the end of row 1. */
-.cn-look-board .cn-actions-bar--board > .cn-actions-bar__row--views > :is(.cn-saved-views__save, .cn-actions-bar__filter-button, .cn-actions-bar__view-toggle) {
+/* The first of Save view and the Filter + view switch unit takes the free
+   space (the board's `flex: 1` spacer), so they sit at the end of row 1.
+   When the line is full the unit wraps as one to the START of the next line
+   while Save view stays at the end of row 1 (DqZaken); without Save view the
+   unit sits at the end of row 1 (PqTickets, PqLeads, PtPortals). */
+.cn-look-board .cn-actions-bar--board > .cn-actions-bar__row--views > :is(.cn-saved-views__save, .cn-actions-bar__view-controls) {
 	margin-inline-start: auto;
 }
 
-.cn-look-board .cn-actions-bar--board > .cn-actions-bar__row--views > :is(.cn-saved-views__save, .cn-actions-bar__filter-button, .cn-actions-bar__view-toggle) ~ :is(.cn-saved-views__save, .cn-actions-bar__filter-button, .cn-actions-bar__view-toggle) {
+.cn-look-board .cn-actions-bar--board > .cn-actions-bar__row--views > .cn-saved-views__save ~ .cn-actions-bar__view-controls {
 	margin-inline-start: 0;
 }
 
+.cn-look-board .cn-actions-bar--board .cn-actions-bar__view-controls {
+	display: flex;
+	flex: 0 0 auto;
+	flex-wrap: nowrap;
+	align-items: center;
+	gap: 8px;
+}
+
 /* Row 2: the search field and the active filters on a line of their own. */
 .cn-look-board .cn-actions-bar--board > .cn-actions-bar__row--search {
 	display: flex;
@@ -1357,16 +1494,39 @@
 	color: var(--color-primary-element-text);
 }
 
-/* Save view: 34px, radius 17, on the light primary tint. */
+/* Save view: a ghost button, 34px, radius 17, no border, on the light primary
+   tint, a 14px icon 6px before the label, on one line. */
 .cn-look-board .cn-saved-views__save .button-vue {
 	min-height: 34px;
 	height: 34px;
-	padding: 0 14px;
+	padding: 0 12px;
+	border: 0;
 	border-radius: 17px;
 	background: var(--color-primary-element-light);
 	color: var(--color-primary-element-light-text);
 	font-size: 13px;
 	font-weight: 600;
+	white-space: nowrap;
+}
+
+.cn-look-board .cn-saved-views__save .button-vue:hover {
+	background: var(--color-primary-element-light-hover);
+}
+
+.cn-look-board .cn-saved-views__save .button-vue .button-vue__wrapper {
+	gap: 6px;
+}
+
+.cn-look-board .cn-saved-views__save .button-vue .button-vue__icon {
+	width: auto;
+	min-width: 0;
+	height: auto;
+	min-height: 0;
+}
+
+.cn-look-board .cn-saved-views__save .button-vue .button-vue__text {
+	margin: 0;
+	padding: 0;
 }
 
 /* Filter: a labelled secondary button, 36px, radius 8, with the active count. */
@@ -1422,6 +1582,15 @@
 	color: var(--color-main-text);
 }
 
+/* A segment the page cannot open: drawn, as the boards do, but faded and inert. */
+.cn-look-board .cn-actions-bar--board .cn-actions-bar__view-toggle .cn-actions-bar__view-toggle-btn--disabled,
+.cn-look-board .cn-actions-bar--board .cn-actions-bar__view-toggle .cn-actions-bar__view-toggle-btn--disabled:hover {
+	background: transparent !important;
+	color: var(--color-text-maxcontrast);
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
 /* The search field: 40px, radius 8, not a pill. */
 .cn-look-board .cn-actions-bar--board .cn-actions-bar__search {
 	flex: 1 1 260px;
@@ -1569,6 +1738,48 @@
 	border-bottom: 0;
 }
 
+/* The table fits its card (screens-index-table-fit-parity). Under the auto
+   layout every one-line cell asked for its whole text up to the 22rem cap, so
+   seven text columns made a 1500px table in a 1118px card at a 1440px
+   viewport: the last columns and the row menus sat past the card's edge. The
+   fixed layout shares the card's width: the selection and menu columns keep
+   their own width, the first data column takes 18%, the others split the
+   rest, and a value that does not fit is cut with an ellipsis (its full text
+   stays in the cell's tooltip). A column's own `width` still wins. */
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table {
+	table-layout: fixed;
+	width: 100%;
+}
+
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table th.cn-table-head--title {
+	width: 18%;
+}
+
+/* The board's data cells sit 12px apart (PqTickets), the first one 18px from
+   the selection column; the selection and menu columns keep 16px. */
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table th:not(.cn-table-col--checkbox):not(.cn-table-col--actions):not(.cn-table-col--icon),
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table td:not(.cn-table-col--checkbox):not(.cn-table-col--actions):not(.cn-table-col--icon) {
+	padding-inline: 12px;
+}
+
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table th.cn-table-head--title,
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table td.cn-table-col--title {
+	padding-inline-start: 18px;
+}
+
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table td > .cn-cell-renderer {
+	display: block;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* A narrow header cuts its label, not its filter funnel. */
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table th .cn-table-header__sort:has(~ .cn-table-header__filter) {
+	max-width: calc(100% - 26px);
+}
+
 /* The selection column: 28px, 18px checkboxes. */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-table-col--checkbox {
 	box-sizing: content-box;
@@ -1598,6 +1809,29 @@
 	text-decoration: none;
 }
 
+/* Only the title is underlined (DqZaken). An underline set on the cell
+   reaches every in-flow child whatever its own text-decoration, so the
+   secondary lines become inline blocks on a line of their own: an atomic
+   inline box is the one thing the underline does not reach. */
+.cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title .cn-table-cell__secondary {
+	display: inline-block;
+	width: 100%;
+	vertical-align: top;
+}
+
+/* `rowTitle: "plain"` (PqTickets, OcPublicaties): the title is bold text in
+   the main text colour without an underline, the secondary line 13px muted,
+   2px under it. The row stays clickable through its stretched row link. */
+.cn-look-board .cn-table-container--board.cn-table-container--title-plain .cn-data-table td.cn-table-col--title {
+	font-weight: 700;
+	text-decoration: none;
+}
+
+.cn-look-board .cn-table-container--board.cn-table-container--title-plain .cn-data-table td.cn-table-col--title .cn-table-cell__secondary {
+	margin-top: 2px;
+	font-size: 13px;
+}
+
 /* A status pill: 3px 10px, radius 12, 13px weight 600. The colours stay the
    status colour map's. */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-status-badge {
@@ -1620,15 +1854,36 @@
 	--default-clickable-area: 34px;
 }
 
+/* The row menu: a 34px square, three dots, a grey border on the main
+   background (DqZaken, PqTickets). A theme that styles every secondary button
+   with `!important` (the nldesign theme: a primary border, 8px 16px padding,
+   `min-width: max-content`) would otherwise turn it into a 64px wide button
+   with a blue border, so the board values are `!important` too. */
+.cn-look-board .cn-row-actions--board .button-vue,
+.cn-look-board .cn-row-actions--board .button-vue:hover,
+.cn-look-board .cn-row-actions--board .button-vue:focus {
+	box-sizing: border-box !important;
+	width: 34px !important;
+	min-width: 34px !important;
+	height: 34px !important;
+	min-height: 34px !important;
+	padding: 0 !important;
+	border: 1px solid var(--color-border-dark) !important;
+	border-radius: 8px !important;
+	color: var(--cn-board-text-soft) !important;
+}
+
 .cn-look-board .cn-row-actions--board .button-vue {
-	width: 34px;
-	min-width: 34px;
-	height: 34px;
-	min-height: 34px;
-	padding: 0;
-	border: 1px solid var(--color-border-dark);
-	border-radius: 8px;
-	background: var(--color-main-background);
+	background: var(--color-main-background) !important;
+}
+
+.cn-look-board .cn-row-actions--board .button-vue:hover {
+	background: var(--color-background-hover) !important;
+}
+
+.cn-look-board .cn-row-actions--board .button-vue:focus-visible {
+	outline: 2px solid var(--color-main-text);
+	outline-offset: 2px;
 }
 
 /* ------------------------------------------------------------------ footer */
@@ -2188,6 +2443,53 @@
 	min-width: 0;
 }
 
+/* Fit to the container (CnDataTable's `fitWidth`, on in CnWidgetObjectTable).
+
+   In a narrow tile the auto layout made the table as wide as its one-line
+   cells, so it ran past the tile and clipped the trailing column (a date).
+   Here every column but one takes the width of its content (`width: 1%` asks
+   for as little as the content allows), and the grow column takes what is
+   left. `max-width: 0` is what lets that column go below its content's width:
+   the table no longer counts its text, so the text is cut with an ellipsis
+   instead of widening the table. The full value stays in the cell's tooltip. */
+.cn-data-table--fit {
+	width: 100%;
+}
+
+.cn-data-table--fit th,
+.cn-data-table--fit td {
+	width: 1%;
+}
+
+.cn-data-table--fit th.cn-table-col--grow,
+.cn-data-table--fit td.cn-table-col--grow {
+	width: auto;
+	min-width: 0;
+	max-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* The secondary line of the growing column ("2026-0004" under a case title)
+   is a line of its own with its own ellipsis. The cell does not wrap, so in
+   the board look, where the secondary line is an inline block (the title
+   underline cannot reach an atomic inline box), it stayed on the title's line
+   and ran out of the tile. A full-width float is a block (computed `display:
+   block`) that always starts under the line before it, and, being out of the
+   flow, the cell's underline does not reach it either. The cell is a table
+   cell, which contains its floats, so the row grows to hold the line.
+   @spec openspec/changes/dashboard-tile-text-fits/specs/dashboard-tile-text-fits/spec.md#requirement-the-secondary-line-of-a-narrow-tables-growing-column-sits-under-the-value */
+.cn-data-table.cn-data-table--fit td.cn-table-col--grow .cn-table-cell__secondary {
+	float: inline-start;
+	clear: both;
+	box-sizing: border-box;
+	width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 .cn-data-table th {
 	background: var(--color-background-dark);
 	font-weight: 500;
@@ -2536,6 +2838,15 @@
 	color: var(--color-text-maxcontrast);
 }
 
+/* The empty row holds a sentence (the empty text, or why a lens cannot
+   answer), not a cell value: it wraps instead of being cut to one line. The
+   selector carries the table class so it outranks the one-line cell rule. */
+.cn-data-table .cn-table-empty td {
+	max-width: none;
+	white-space: normal;
+	overflow-wrap: anywhere;
+}
+
 /* ========================================
    Backwards compatibility aliases
    (legacy OpenRegister CSS class names)
@@ -3377,6 +3688,38 @@ a.cn-kpi-card--stacked:focus-visible {
 	font-weight: 400;
 }
 
+/* A caption on a line of its own wraps, up to two lines (DqDashboard: "haalden
+   hun termijn, naar doorlooptijd" runs over two lines in a narrow tile). The
+   one-line rule of `.cn-kpi-card__label` is for a caption BESIDE the number,
+   where a second line would push the tile taller; this line has the width of
+   the tile to itself. The clamp is safe here because the element is a plain
+   span, not a flex row (compare the title note above).
+   @spec openspec/changes/dashboard-tile-text-fits/specs/dashboard-tile-text-fits/spec.md#requirement-a-kpi-tiles-caption-and-board-label-wrap-to-two-lines */
+.cn-kpi-card--stacked .cn-kpi-card__caption-line {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
+	white-space: normal;
+	overflow-wrap: break-word;
+}
+
+/* Board look: the label wraps too, up to two lines, beside its icon badge
+   ("Afgehandeld deze maand"). The clamp sits on the label's own span
+   (`cn-kpi-card__title-text`), not on the title row, which stays the flex row
+   that carries the badge or the range select. */
+.cn-kpi-card--board .cn-kpi-card__title-text {
+	flex: 1 1 auto;
+	min-width: 0;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
+	overflow: hidden;
+	white-space: normal;
+	overflow-wrap: break-word;
+}
+
 /* The 18px glyph before the label, drawn only on a link tile. */
 .cn-kpi-card--board .cn-kpi-card__title {
 	display: flex;
@@ -4669,6 +5012,77 @@ a.cn-kpi-card--board * {
 	color: var(--color-text-maxcontrast);
 	font-size: 0.9em;
 }
+
+/* An index page with cards beside its list (`sidePanel`,
+   screens-index-stat-row): the header rows span the page, the toolbar and the
+   list take the first column and the side panel the second (300px, 20px
+   apart), spanning both. Every other child (dialogs, the inline sidebar) sits
+   in a zero-height area after them. The list row is the flexible one, so a
+   side panel taller than the toolbar never opens a gap under the toolbar.
+   Below 1024px the panel moves above the toolbar. */
+.cn-index-page--with-side-panel {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) var(--cn-index-side-panel-width, 300px);
+	grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
+	grid-template-areas:
+		"head head"
+		"below below"
+		"stats stats"
+		"bar side"
+		"body side"
+		"extra extra";
+	column-gap: 20px;
+	align-content: start;
+}
+
+.cn-index-page--with-side-panel > * {
+	grid-area: extra;
+	min-width: 0;
+}
+
+.cn-index-page--with-side-panel > :first-child {
+	grid-area: head;
+}
+
+.cn-index-page--with-side-panel > .cn-index-page__below-header {
+	grid-area: below;
+}
+
+.cn-index-page--with-side-panel > .cn-index-page__stat-row {
+	grid-area: stats;
+}
+
+.cn-index-page--with-side-panel > .cn-actions-bar {
+	grid-area: bar;
+}
+
+.cn-index-page--with-side-panel > .cn-index-page__body {
+	grid-area: body;
+}
+
+.cn-index-page--with-side-panel > .cn-index-page__side-panel {
+	grid-area: side;
+	align-self: start;
+}
+
+@media (max-width: 1024px) {
+	.cn-index-page--with-side-panel {
+		grid-template-columns: minmax(0, 1fr);
+		grid-template-areas:
+			"head"
+			"below"
+			"stats"
+			"side"
+			"bar"
+			"body"
+			"extra";
+		grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
+	}
+
+	.cn-index-page--with-side-panel > .cn-index-page__side-panel {
+		margin-bottom: 20px;
+	}
+}
 /* CnIndexSidebar — NcAppSidebar wrapper styles */
 
 /* Tab content: limit height to container so overflow shows a scrollbar */
@@ -5667,6 +6081,61 @@ a.cn-kpi-card--board * {
 	margin-bottom: 0;
 }
 
+/* The breadcrumb is a line of 14px text between the pills and the meta, as
+   the boards draw it (screens-detail-header-row-parity). NcBreadcrumbs grows to
+   the full row and draws each crumb as a 34px tertiary button, which pushed the
+   pills above it and the meta under it. The doubled class outranks its scoped
+   rules. */
+.cn-look-board .cn-detail-page__header-row2 .cn-detail-page__breadcrumbs.cn-detail-page__breadcrumbs {
+	flex: 0 1 auto;
+	height: auto;
+	min-height: 0;
+	min-width: 0;
+	width: auto;
+}
+
+.cn-look-board .cn-detail-page__header-row2 .cn-detail-page__breadcrumbs .breadcrumb__crumbs {
+	gap: 8px;
+	margin: 0;
+	min-height: 0;
+	padding: 0;
+	vertical-align: middle;
+}
+
+.cn-look-board .cn-detail-page__header-row2 .cn-detail-page__breadcrumbs .vue-crumb.vue-crumb {
+	gap: 8px;
+	height: auto;
+	min-height: 0;
+	min-width: 0;
+}
+
+.cn-look-board .cn-detail-page__header-row2 .cn-detail-page__breadcrumbs .vue-crumb .button-vue.button-vue {
+	background: transparent;
+	border: 0;
+	font-size: 14px;
+	font-weight: 400;
+	height: auto;
+	min-height: 0;
+	min-width: 0;
+	padding: 0;
+}
+
+.cn-look-board .cn-detail-page__header-row2 .cn-detail-page__breadcrumbs .vue-crumb .button-vue__text {
+	font-weight: inherit;
+	line-height: 20px;
+	padding: 0;
+}
+
+/* The list is the link; the record's own crumb is plain muted text. */
+.cn-look-board .cn-detail-page__header-row2 .cn-detail-page__breadcrumbs .vue-crumb .button-vue[aria-current='page'] {
+	color: var(--color-text-maxcontrast);
+	cursor: default;
+}
+
+.cn-look-board .cn-detail-page__header-row2 .cn-detail-page__breadcrumbs .vue-crumb__separator {
+	margin: 0;
+}
+
 .cn-look-board .cn-detail-page__header-dot,
 .cn-look-board .cn-detail-page__header-meta {
 	color: var(--color-text-maxcontrast);
@@ -5692,6 +6161,16 @@ a.cn-kpi-card--board * {
 	gap: 20px;
 }
 
+/* GridStack insets every cell by its 12px margin, the outer edge included, so
+   the tab strip started 12px below the top of the body column and stopped 12px
+   short of its end, while the side column started at the top. Pulling the grid
+   out by that margin puts its first card on the column's edges: the side column
+   is level with the strip, and the strip ends where the body column ends. */
+.cn-look-board.cn-detail-page--with-side > .cn-detail-page__body > .cn-detail-page__grid {
+	margin: -12px;
+	width: auto;
+}
+
 /* ---- Folder tabs ------------------------------------------------------- */
 
 /* The strip draws no line of its own (design-system pull request 147). The card under it
@@ -5799,6 +6278,22 @@ a.cn-kpi-card--board * {
 	border-radius: 0;
 }
 
+/* A tab that holds a stack (`widgetIds`, screens-relation-pages): the panel
+   draws no frame and no padding; each widget is its own card. The first card
+   joins the open tab (the first-card rule above), the next ones stand 20px
+   apart, as the Overzicht of DqContact and PqOrganisatie draws them. */
+.cn-look-board .cn-tabs--board.cn-tabs-widget__tabs .cn-tabs__content:has(> .cn-tab:not([hidden]) > .cn-tabs-widget__stack) {
+	background: transparent;
+	border: 0;
+	border-radius: 0;
+	padding: 0;
+}
+
+/* The stack's next cards are whole cards, not joined to the strip. */
+.cn-look-board .cn-tabs--board .cn-tabs__content .cn-tab .cn-tabs-widget__stack-item .cn-widget-wrapper {
+	border-radius: var(--cn-board-card-radius);
+}
+
 /* ---- Body cards and side cards ----------------------------------------- */
 
 .cn-look-board .cn-detail-page .cn-widget-wrapper,
@@ -5878,6 +6373,12 @@ a.cn-kpi-card--board * {
 	display: none;
 }
 
+/* A side card whose widget reports a header action (screens-relation-pages:
+   the "+ Toevoegen" of Contactkanalen and Relaties) keeps that one button. */
+.cn-look-board .cn-detail-page__side .cn-widget-wrapper__actions:has(.cn-detail-page__catalog-action) {
+	display: flex;
+}
+
 /* The notice at the top of the side column: radius 12, padding 14px 16px. */
 .cn-look-board .cn-detail-page__side-item--notice .cn-widget-wrapper,
 .cn-look-board .cn-detail-page__side-item--notice .cn-banner-widget,
@@ -9236,9 +9737,95 @@ svg.leaflet-image-layer.leaflet-interactive path {
    does not rest on colour alone. */
 .cn-cell-renderer__date--success[data-v-37d7b88f],
 .cn-cell-renderer__date--warning[data-v-37d7b88f],
-.cn-cell-renderer__date--error[data-v-37d7b88f] {
+.cn-cell-renderer__date--error[data-v-37d7b88f],
+.cn-cell-renderer__age--success[data-v-37d7b88f],
+.cn-cell-renderer__age--warning[data-v-37d7b88f],
+.cn-cell-renderer__age--error[data-v-37d7b88f] {
 	font-weight: 600;
 }
+.cn-cell-renderer__age[data-v-37d7b88f] {
+	white-space: nowrap;
+}
+
+/* The progress cell (abstract-progress-cell): a 56 x 8 bar, the percentage
+   8px beside it in the bar's tone, and an optional age badge after them, as
+   PqLeads' Winkans column. The value is bold, so the tone is not the only signal. */
+.cn-cell-renderer__progress[data-v-37d7b88f] {
+	display: inline-flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 4px 8px;
+}
+.cn-cell-renderer__progress-line[data-v-37d7b88f] {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	white-space: nowrap;
+}
+.cn-cell-renderer__progress-bar[data-v-37d7b88f] {
+	display: inline-block;
+	width: 56px;
+	height: 8px;
+	border-radius: 4px;
+	background: var(--color-background-dark);
+	overflow: hidden;
+}
+.cn-cell-renderer__progress-fill[data-v-37d7b88f] {
+	display: block;
+	height: 100%;
+}
+.cn-cell-renderer__progress-fill--success[data-v-37d7b88f] {
+	background: var(--color-element-success, var(--color-success));
+}
+.cn-cell-renderer__progress-fill--warning[data-v-37d7b88f] {
+	background: var(--color-element-warning, var(--color-warning));
+}
+.cn-cell-renderer__progress-fill--error[data-v-37d7b88f] {
+	background: var(--color-element-error, var(--color-error));
+}
+.cn-cell-renderer__progress-value[data-v-37d7b88f] {
+	font-size: 14px;
+	font-weight: 700;
+}
+.cn-cell-renderer__progress-value--success[data-v-37d7b88f] {
+	color: var(--color-text-success, var(--color-success-text));
+}
+.cn-cell-renderer__progress-value--warning[data-v-37d7b88f] {
+	color: var(--color-text-warning, var(--color-warning-text));
+}
+.cn-cell-renderer__progress-value--error[data-v-37d7b88f] {
+	color: var(--color-text-error, var(--color-error-text));
+}
+.cn-cell-renderer__progress-badge[data-v-37d7b88f] {
+	display: inline-block;
+	padding: 3px 10px;
+	border-radius: 12px;
+	font-size: 13px;
+	font-weight: 600;
+	white-space: nowrap;
+}
+.cn-cell-renderer__progress-badge--error[data-v-37d7b88f] {
+	color: var(--color-text-error, var(--color-error-text));
+	background: var(--color-error-hover, var(--color-background-dark));
+	background: color-mix(in srgb, var(--color-error) 12%, transparent);
+}
+.cn-cell-renderer__progress-badge--warning[data-v-37d7b88f] {
+	color: var(--color-text-warning, var(--color-warning-text));
+	background: color-mix(in srgb, var(--color-warning) 14%, transparent);
+}
+.cn-cell-renderer__progress-badge--success[data-v-37d7b88f] {
+	color: var(--color-text-success, var(--color-success-text));
+	background: color-mix(in srgb, var(--color-success) 12%, transparent);
+}
+.cn-cell-renderer__age--success[data-v-37d7b88f] {
+	color: var(--color-text-success, var(--color-success-text));
+}
+.cn-cell-renderer__age--warning[data-v-37d7b88f] {
+	color: var(--color-text-warning, var(--color-warning-text));
+}
+.cn-cell-renderer__age--error[data-v-37d7b88f] {
+	color: var(--color-text-error, var(--color-error-text));
+}
 .cn-cell-renderer__date--success[data-v-37d7b88f] {
 	color: var(--color-text-success, var(--color-success-text));
 }
@@ -9534,6 +10121,53 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	min-width: 0;
 }
 
+/* Fit to the container (CnDataTable's `fitWidth`, on in CnWidgetObjectTable).
+
+   In a narrow tile the auto layout made the table as wide as its one-line
+   cells, so it ran past the tile and clipped the trailing column (a date).
+   Here every column but one takes the width of its content (`width: 1%` asks
+   for as little as the content allows), and the grow column takes what is
+   left. `max-width: 0` is what lets that column go below its content's width:
+   the table no longer counts its text, so the text is cut with an ellipsis
+   instead of widening the table. The full value stays in the cell's tooltip. */
+.cn-data-table--fit {
+	width: 100%;
+}
+
+.cn-data-table--fit th,
+.cn-data-table--fit td {
+	width: 1%;
+}
+
+.cn-data-table--fit th.cn-table-col--grow,
+.cn-data-table--fit td.cn-table-col--grow {
+	width: auto;
+	min-width: 0;
+	max-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* The secondary line of the growing column ("2026-0004" under a case title)
+   is a line of its own with its own ellipsis. The cell does not wrap, so in
+   the board look, where the secondary line is an inline block (the title
+   underline cannot reach an atomic inline box), it stayed on the title's line
+   and ran out of the tile. A full-width float is a block (computed `display:
+   block`) that always starts under the line before it, and, being out of the
+   flow, the cell's underline does not reach it either. The cell is a table
+   cell, which contains its floats, so the row grows to hold the line.
+   @spec openspec/changes/dashboard-tile-text-fits/specs/dashboard-tile-text-fits/spec.md#requirement-the-secondary-line-of-a-narrow-tables-growing-column-sits-under-the-value */
+.cn-data-table.cn-data-table--fit td.cn-table-col--grow .cn-table-cell__secondary {
+	float: inline-start;
+	clear: both;
+	box-sizing: border-box;
+	width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 .cn-data-table th {
 	background: var(--color-background-dark);
 	font-weight: 500;
@@ -9882,6 +10516,15 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	color: var(--color-text-maxcontrast);
 }
 
+/* The empty row holds a sentence (the empty text, or why a lens cannot
+   answer), not a cell value: it wraps instead of being cut to one line. The
+   selector carries the table class so it outranks the one-line cell rule. */
+.cn-data-table .cn-table-empty td {
+	max-width: none;
+	white-space: normal;
+	overflow-wrap: anywhere;
+}
+
 /* ========================================
    Backwards compatibility aliases
    (legacy OpenRegister CSS class names)
@@ -14545,6 +15188,13 @@ button.cn-files-card__open[data-v-46f7e3c9]:hover {
 	min-width: 0;
 	flex: 1 1 auto;
 }
+
+/* The crumbs give way, the controls do not: a long crumb (a folder named
+   after a uuid) shrank the upload button to "Bestanden..." while the crumbs
+   kept their width. */
+.cn-files-browser__bar[data-v-f5bdd9e2] > :not(.cn-files-browser__crumbs) {
+	flex-shrink: 0;
+}
 .cn-files-browser__file-input[data-v-f5bdd9e2] {
 	display: none;
 }
@@ -20949,6 +21599,38 @@ a.cn-kpi-card--stacked:focus-visible {
 	font-weight: 400;
 }
 
+/* A caption on a line of its own wraps, up to two lines (DqDashboard: "haalden
+   hun termijn, naar doorlooptijd" runs over two lines in a narrow tile). The
+   one-line rule of `.cn-kpi-card__label` is for a caption BESIDE the number,
+   where a second line would push the tile taller; this line has the width of
+   the tile to itself. The clamp is safe here because the element is a plain
+   span, not a flex row (compare the title note above).
+   @spec openspec/changes/dashboard-tile-text-fits/specs/dashboard-tile-text-fits/spec.md#requirement-a-kpi-tiles-caption-and-board-label-wrap-to-two-lines */
+.cn-kpi-card--stacked .cn-kpi-card__caption-line {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
+	white-space: normal;
+	overflow-wrap: break-word;
+}
+
+/* Board look: the label wraps too, up to two lines, beside its icon badge
+   ("Afgehandeld deze maand"). The clamp sits on the label's own span
+   (`cn-kpi-card__title-text`), not on the title row, which stays the flex row
+   that carries the badge or the range select. */
+.cn-kpi-card--board .cn-kpi-card__title-text {
+	flex: 1 1 auto;
+	min-width: 0;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
+	overflow: hidden;
+	white-space: normal;
+	overflow-wrap: break-word;
+}
+
 /* The 18px glyph before the label, drawn only on a link tile. */
 .cn-kpi-card--board .cn-kpi-card__title {
 	display: flex;
@@ -22978,6 +23660,27 @@ button.cn-stepper__step[data-v-19697746] {
 }
 
 
+.cn-detail-page__catalog-action[data-v-76c1b60f] {
+	align-items: center;
+	background: var(--color-primary-element-light);
+	border: 0;
+	border-radius: 16px;
+	color: var(--color-primary-element-light-text, var(--color-primary-element));
+	cursor: pointer;
+	display: inline-flex;
+	font: inherit;
+	font-size: 13px;
+	font-weight: 700;
+	gap: 6px;
+	min-height: 32px;
+	padding: 0 14px;
+	white-space: nowrap;
+}
+.cn-detail-page__catalog-note[data-v-76c1b60f] {
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+	white-space: nowrap;
+}
 .cn-detail-widget-host[data-v-76c1b60f],
 .cn-detail-widget-host[data-v-76c1b60f] > * {
 	height: 100%;
@@ -23267,6 +23970,13 @@ button.cn-stepper__step[data-v-19697746] {
 }
 
 
+/* A stack (`widgetIds`): the panel's widget, then cards 20px apart. */
+.cn-tabs-widget__stack[data-v-1dbd6122] {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+}
+
 /* The panel is the card; the strip is not inside it. There is no title bar
    above the tabs either: the open tab names the panel, so a title row would
    say the same thing twice and cost a row of height on a card that is mostly
@@ -27349,6 +28059,441 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-75628
 }
 
 
+.cn-sections-widget[data-v-ea4f8722] {
+	min-width: 0;
+}
+.cn-sections-widget__column[data-v-ea4f8722] {
+	display: flex;
+	flex-direction: column;
+	gap: calc(var(--default-grid-baseline, 4px) * 4);
+	min-width: 0;
+}
+
+/* A main and a side column (the settings boards: 1fr and 418px, 20px apart). */
+.cn-sections-widget--two-column[data-v-ea4f8722] {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) minmax(280px, 418px);
+	gap: 20px;
+	align-items: start;
+}
+@media (max-width: 1024px) {
+.cn-sections-widget--two-column[data-v-ea4f8722] {
+		grid-template-columns: minmax(0, 1fr);
+}
+}
+
+/* A host page may space every <section>; these sections are spaced by the column gap only. */
+.cn-sections-widget__section[data-v-ea4f8722] {
+	margin: 0;
+	min-width: 0;
+}
+
+/* A rule above a section that follows a shown one. */
+.cn-sections-widget:not(.cn-sections-widget--cards) .cn-sections-widget__section:not(.cn-sections-widget__section--empty) ~ .cn-sections-widget__section[data-v-ea4f8722] {
+	padding-top: calc(var(--default-grid-baseline, 4px) * 4);
+	border-top: 1px solid var(--color-border);
+}
+
+/*
+ * An empty section keeps its host mounted (display: none still mounts it, so
+ * the widget fetches and can fill later) but takes no space, gap or rule.
+ */
+.cn-sections-widget__section--empty[data-v-ea4f8722] {
+	display: none;
+}
+.cn-sections-widget__heading[data-v-ea4f8722] {
+	margin: 0 0 calc(var(--default-grid-baseline, 4px) * 2);
+	font-size: 16px;
+	font-weight: 600;
+	color: var(--color-main-text);
+}
+.cn-sections-widget__description[data-v-ea4f8722] {
+	margin: calc(var(--default-grid-baseline, 4px) * -1) 0 calc(var(--default-grid-baseline, 4px) * 3);
+	color: var(--color-text-maxcontrast);
+}
+
+/* One card per section. */
+.cn-sections-widget--cards .cn-sections-widget__column[data-v-ea4f8722] {
+	gap: 20px;
+}
+.cn-sections-widget--cards .cn-sections-widget__section[data-v-ea4f8722] {
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border);
+	border-radius: var(--cn-board-card-radius, var(--border-radius-large, 12px));
+	padding: var(--cn-board-card-padding, 16px 20px);
+}
+.cn-sections-widget--cards .cn-sections-widget__heading[data-v-ea4f8722] {
+	font-size: 18px;
+	margin-bottom: 12px;
+}
+
+
+.cn-facts-widget[data-v-2ca63011] {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	min-width: 0;
+}
+.cn-facts-widget__rows[data-v-2ca63011] {
+	display: grid;
+	grid-template-columns: max-content 1fr;
+	gap: 8px 16px;
+	margin: 0;
+	font-size: 14px;
+}
+
+/* Each row is a grid of its own children: the wrapper takes no box. */
+.cn-facts-widget__row[data-v-2ca63011] {
+	display: contents;
+}
+.cn-facts-widget__label[data-v-2ca63011] {
+	color: var(--color-text-maxcontrast);
+}
+.cn-facts-widget__value[data-v-2ca63011] {
+	margin: 0;
+	font-weight: 500;
+	min-width: 0;
+	overflow-wrap: anywhere;
+}
+.cn-facts-widget__title[data-v-2ca63011] {
+	font-size: 15px;
+	font-weight: 600;
+	color: var(--color-main-text);
+}
+.cn-facts-widget__line[data-v-2ca63011] {
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-facts-widget__muted[data-v-2ca63011] {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+}
+.cn-facts-widget__label .hidden-visually[data-v-2ca63011] {
+	clip-path: inset(50%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+}
+.cn-facts-widget__label--icon[data-v-2ca63011] {
+	align-items: center;
+	display: flex;
+}
+.cn-facts-widget__value-link[data-v-2ca63011] {
+	color: var(--color-primary-element);
+	text-decoration: underline;
+}
+.cn-facts-widget__inline-button[data-v-2ca63011],
+.cn-facts-widget__icon-button[data-v-2ca63011],
+.cn-facts-widget__action[data-v-2ca63011] {
+	align-items: center;
+	cursor: pointer;
+	display: inline-flex;
+	font: inherit;
+}
+.cn-facts-widget__inline-button[data-v-2ca63011] {
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border-dark);
+	border-radius: 16px;
+	font-size: 13px;
+	font-weight: 600;
+	gap: 4px;
+	margin-inline-start: 8px;
+	min-height: 28px;
+	padding: 0 10px;
+}
+.cn-facts-widget__icon-button[data-v-2ca63011] {
+	background: transparent;
+	border: 0;
+	border-radius: 6px;
+	color: var(--color-text-maxcontrast);
+	margin-inline-start: 4px;
+	padding: 2px;
+	vertical-align: middle;
+}
+.cn-facts-widget__icon-button[data-v-2ca63011]:hover,
+.cn-facts-widget__icon-button[data-v-2ca63011]:focus-visible {
+	background: var(--color-background-hover);
+	color: var(--color-main-text);
+}
+.cn-facts-widget__text[data-v-2ca63011] {
+	color: var(--color-main-text);
+	font-size: 15px;
+}
+
+/* A lead: an icon tile or initials beside a bold title and a muted subtitle. */
+.cn-facts-widget__lead[data-v-2ca63011] {
+	align-items: center;
+	display: flex;
+	gap: 12px;
+}
+.cn-facts-widget__lead-tile[data-v-2ca63011] {
+	align-items: center;
+	background: var(--color-background-dark);
+	border-radius: 8px;
+	color: var(--color-main-text);
+	display: flex;
+	flex: none;
+	font-size: 14px;
+	font-weight: 700;
+	height: 40px;
+	justify-content: center;
+	width: 40px;
+}
+.cn-facts-widget__lead-tile--success[data-v-2ca63011] {
+	background: color-mix(in srgb, var(--color-success) 14%, var(--color-main-background));
+	border-radius: 50%;
+	color: var(--color-success-text, var(--color-success));
+}
+.cn-facts-widget__lead-tile--info[data-v-2ca63011] {
+	background: var(--color-primary-element-light);
+	border-radius: 50%;
+	color: var(--color-primary-element-light-text, var(--color-primary-element));
+}
+.cn-facts-widget__lead-text[data-v-2ca63011] {
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+}
+.cn-facts-widget__lead-title[data-v-2ca63011] {
+	font-size: 15px;
+}
+.cn-facts-widget__lead-subtitle[data-v-2ca63011] {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+.cn-facts-widget__action[data-v-2ca63011] {
+	align-self: flex-start;
+	background: var(--color-primary-element-light);
+	border: 0;
+	border-radius: 16px;
+	color: var(--color-primary-element-light-text, var(--color-primary-element));
+	font-size: 13px;
+	font-weight: 700;
+	gap: 6px;
+	min-height: 32px;
+	padding: 0 14px;
+}
+.cn-facts-widget__action[data-v-2ca63011]:hover,
+.cn-facts-widget__action[data-v-2ca63011]:focus-visible {
+	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));
+}
+.cn-facts-widget__link[data-v-2ca63011] {
+	font-size: 14px;
+	font-weight: 600;
+	color: var(--color-primary-element);
+	text-decoration: underline;
+}
+
+
+.cn-field-list-widget[data-v-0f29a833] {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	min-width: 0;
+}
+.cn-field-list-widget__rows[data-v-0f29a833] {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+}
+.cn-field-list-widget__row[data-v-0f29a833] {
+	padding: 10px 0;
+	border-top: 1px solid var(--color-border);
+}
+.cn-field-list-widget__row[data-v-0f29a833]:first-child {
+	border-top: none;
+	padding-top: 0;
+}
+.cn-field-list-widget__line[data-v-0f29a833] {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	min-width: 0;
+}
+.cn-field-list-widget__avatar[data-v-0f29a833] {
+	flex: 0 0 auto;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text, var(--color-main-text));
+	font-size: 12px;
+	font-weight: 700;
+}
+.cn-field-list-widget__main[data-v-0f29a833] {
+	display: flex;
+	flex-direction: column;
+	flex: 1 1 auto;
+	min-width: 0;
+}
+.cn-field-list-widget__title[data-v-0f29a833] {
+	font-weight: 600;
+	overflow-wrap: anywhere;
+}
+.cn-field-list-widget__meta[data-v-0f29a833],
+.cn-field-list-widget__aside[data-v-0f29a833],
+.cn-field-list-widget__detail[data-v-0f29a833],
+.cn-field-list-widget__hint[data-v-0f29a833],
+.cn-field-list-widget__empty[data-v-0f29a833] {
+	color: var(--color-text-maxcontrast);
+}
+.cn-field-list-widget__meta[data-v-0f29a833],
+.cn-field-list-widget__aside[data-v-0f29a833],
+.cn-field-list-widget__detail[data-v-0f29a833] {
+	font-size: 13px;
+}
+.cn-field-list-widget__aside[data-v-0f29a833] {
+	white-space: nowrap;
+}
+.cn-field-list-widget__detail[data-v-0f29a833],
+.cn-field-list-widget__hint[data-v-0f29a833],
+.cn-field-list-widget__empty[data-v-0f29a833] {
+	margin: 4px 0 0;
+	overflow-wrap: anywhere;
+}
+.cn-field-list-widget__add[data-v-0f29a833] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-end;
+	gap: 8px 12px;
+}
+.cn-field-list-widget__add[data-v-0f29a833] > * {
+	flex: 1 1 180px;
+}
+.cn-field-list-widget__add > button[data-v-0f29a833] {
+	flex: 0 0 auto;
+}
+
+
+.cn-record-list__list[data-v-7073b362] {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+.cn-record-list__empty[data-v-7073b362],
+.cn-record-list__error[data-v-7073b362] {
+	color: var(--color-text-maxcontrast);
+	margin: 0;
+}
+.cn-record-list__loading[data-v-7073b362] {
+	display: flex;
+	justify-content: center;
+	padding: 8px 0;
+}
+
+/* rows */
+.cn-record-list--rows .cn-record-list__item + .cn-record-list__item[data-v-7073b362] {
+	border-top: 1px solid var(--color-border);
+}
+.cn-record-list__row[data-v-7073b362] {
+	align-items: center;
+	color: var(--color-main-text);
+	display: flex;
+	gap: 16px;
+	padding: 12px 0;
+	text-decoration: none;
+}
+.cn-record-list__row--link:hover .cn-record-list__title[data-v-7073b362],
+.cn-record-list__row--link:focus-visible .cn-record-list__title[data-v-7073b362] {
+	text-decoration: underline;
+}
+.cn-record-list__main[data-v-7073b362] {
+	display: flex;
+	flex: 1 1 auto;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+.cn-record-list__title[data-v-7073b362] {
+	font-size: 15px;
+	font-weight: 700;
+}
+.cn-record-list__meta[data-v-7073b362] {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+.cn-record-list__aside[data-v-7073b362] {
+	align-items: center;
+	display: flex;
+	flex: none;
+	gap: 16px;
+}
+.cn-record-list__trailing[data-v-7073b362] {
+	font-size: 14px;
+	white-space: nowrap;
+}
+.cn-record-list__chevron[data-v-7073b362] {
+	color: var(--color-text-maxcontrast);
+	flex: none;
+}
+
+/* feed */
+.cn-record-list--feed .cn-record-list__item + .cn-record-list__item[data-v-7073b362] {
+	border-top: 1px solid var(--color-border);
+}
+.cn-record-list__feed-row[data-v-7073b362] {
+	align-items: flex-start;
+	display: flex;
+	gap: 14px;
+	padding: 12px 0;
+}
+.cn-record-list__feed-icon[data-v-7073b362] {
+	align-items: center;
+	background: var(--color-primary-element-light);
+	border-radius: 50%;
+	color: var(--color-primary-element-light-text, var(--color-primary-element));
+	display: flex;
+	flex: none;
+	height: 36px;
+	justify-content: center;
+	width: 36px;
+}
+.cn-record-list__text[data-v-7073b362] {
+	font-size: 15px;
+}
+.cn-record-list--feed .cn-record-list__main[data-v-7073b362] {
+	color: var(--color-main-text);
+	text-decoration: none;
+}
+
+/* inline */
+.cn-record-list__inline-row[data-v-7073b362] {
+	padding: 4px 0;
+}
+.cn-record-list__label[data-v-7073b362] {
+	margin-inline-end: 4px;
+}
+.cn-record-list__inline-title[data-v-7073b362] {
+	color: var(--color-main-text);
+}
+a.cn-record-list__inline-title[data-v-7073b362] {
+	color: var(--color-primary-element);
+	text-decoration: underline;
+}
+
+
+/* In a narrow side column a row stacks: title, meta, then pill and date. */
+.cn-detail-page__side .cn-record-list__row {
+	align-items: flex-start;
+	flex-direction: column;
+	gap: 6px;
+}
+.cn-detail-page__side .cn-record-list__row .cn-record-list__title {
+	color: var(--color-primary-element);
+	text-decoration: underline;
+}
+.cn-detail-page__side .cn-record-list__chevron {
+	display: none;
+}
+
+
 .cn-notepad-widget-form[data-v-c752df66] {
 	display: flex;
 	flex-direction: column;
@@ -27659,6 +28804,40 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-75628
 	flex-direction: column;
 	gap: 2px;
 }
+
+/* The start card: text left, control (and link) right, as PqDashboard's "Contact starten". */
+.cn-workspace-filter-widget--start[data-v-f0d5c1c6] {
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 16px 24px;
+}
+.cn-workspace-filter-widget__text[data-v-f0d5c1c6] {
+	flex: 1 1 320px;
+	min-width: 0;
+}
+.cn-workspace-filter-widget__title[data-v-f0d5c1c6] {
+	margin: 0 0 4px;
+	font-size: 17px;
+	font-weight: 700;
+	color: var(--color-main-text);
+}
+.cn-workspace-filter-widget__description[data-v-f0d5c1c6] {
+	margin: 0;
+	max-width: 420px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-workspace-filter-widget--start .cn-workspace-filter-widget__control[data-v-f0d5c1c6],
+.cn-workspace-filter-widget--start > .v-select[data-v-f0d5c1c6] {
+	flex: 0 1 480px;
+	min-width: 240px;
+}
+.cn-workspace-filter-widget__link[data-v-f0d5c1c6] {
+	font-weight: 600;
+	color: var(--color-primary-element);
+	text-decoration: underline;
+	white-space: nowrap;
+}
 .cn-workspace-filter-widget__count[data-v-f0d5c1c6] {
 	margin-inline-start: 6px;
 	padding: 0 6px;
@@ -32554,6 +33733,86 @@ button.cn-object-calendar__overflow[data-v-bea31862] {
 }
 
 
+/*
+ * Layout only — this component draws no KPI of its own; the tiles inside it do
+ * (src/css/kpi-card.css). What it DOES owe the canonical look is the rhythm
+ * around those tiles, so the gutter is the card's own `--cn-kpi-grid-gap`
+ * rather than a number picked here. A grid whose gutter disagrees with the
+ * card's padding reads as a different design even when every tile is
+ * identical.
+ */
+.cn-kpi-grid[data-v-e31696e2] {
+	display: grid;
+	gap: var(--cn-kpi-grid-gap, 16px);
+	margin-bottom: 24px;
+}
+
+/*
+ * `minmax(0, 1fr)`, not `1fr`. A grid track's default minimum is `auto`, which
+ * refuses to shrink below its content — and the canonical KPI value is
+ * deliberately `white-space: nowrap`, so a long number (a formatted currency
+ * amount, a six-figure count) pushes its track wider than its share and the
+ * whole row overflows the page. With a 0 minimum the track holds its share and
+ * the card's own `overflow: hidden` clips instead.
+ */
+.cn-kpi-grid--cols-2[data-v-e31696e2] {
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.cn-kpi-grid--cols-3[data-v-e31696e2] {
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.cn-kpi-grid--cols-4[data-v-e31696e2] {
+	grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+/* Auto: as many 200px columns as fit (screens-dashboard-parity). */
+.cn-kpi-grid--cols-auto[data-v-e31696e2] {
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+/* Responsive breakpoints */
+@media (max-width: 1200px) {
+.cn-kpi-grid--cols-4[data-v-e31696e2] {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+}
+@media (max-width: 900px) {
+.cn-kpi-grid--cols-3[data-v-e31696e2] {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+}
+@media (max-width: 600px) {
+.cn-kpi-grid--cols-2[data-v-e31696e2],
+	.cn-kpi-grid--cols-3[data-v-e31696e2],
+	.cn-kpi-grid--cols-4[data-v-e31696e2] {
+		grid-template-columns: minmax(0, 1fr);
+}
+}
+
+
+.cn-index-page-widgets--stat-row[data-v-5ec0c5bc] {
+	margin-bottom: var(--cn-board-section-gap, 20px);
+}
+.cn-index-page-widgets__cell[data-v-5ec0c5bc] {
+	display: flex;
+	min-width: 0;
+}
+.cn-index-page-widgets__cell[data-v-5ec0c5bc] > * {
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+/* The side panel column (DqTeamwachtrij: 300px, 16px between cards). Its
+   place beside the toolbar and the list is set by CnIndexPage
+   (`cn-index-page--with-side-panel`, index-page.css). */
+.cn-index-page-widgets--side-panel[data-v-5ec0c5bc] {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	min-width: 0;
+}
+
+
 .cn-advanced-form-dialog__json-editor[data-v-733de04c] {
 	display: flex;
 	flex-direction: column;
@@ -33829,63 +35088,6 @@ button.cn-object-calendar__overflow[data-v-bea31862] {
 }
 
 
-/*
- * Layout only — this component draws no KPI of its own; the tiles inside it do
- * (src/css/kpi-card.css). What it DOES owe the canonical look is the rhythm
- * around those tiles, so the gutter is the card's own `--cn-kpi-grid-gap`
- * rather than a number picked here. A grid whose gutter disagrees with the
- * card's padding reads as a different design even when every tile is
- * identical.
- */
-.cn-kpi-grid[data-v-e31696e2] {
-	display: grid;
-	gap: var(--cn-kpi-grid-gap, 16px);
-	margin-bottom: 24px;
-}
-
-/*
- * `minmax(0, 1fr)`, not `1fr`. A grid track's default minimum is `auto`, which
- * refuses to shrink below its content — and the canonical KPI value is
- * deliberately `white-space: nowrap`, so a long number (a formatted currency
- * amount, a six-figure count) pushes its track wider than its share and the
- * whole row overflows the page. With a 0 minimum the track holds its share and
- * the card's own `overflow: hidden` clips instead.
- */
-.cn-kpi-grid--cols-2[data-v-e31696e2] {
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-.cn-kpi-grid--cols-3[data-v-e31696e2] {
-	grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-.cn-kpi-grid--cols-4[data-v-e31696e2] {
-	grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
-/* Auto: as many 200px columns as fit (screens-dashboard-parity). */
-.cn-kpi-grid--cols-auto[data-v-e31696e2] {
-	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-}
-
-/* Responsive breakpoints */
-@media (max-width: 1200px) {
-.cn-kpi-grid--cols-4[data-v-e31696e2] {
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-}
-@media (max-width: 900px) {
-.cn-kpi-grid--cols-3[data-v-e31696e2] {
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-}
-@media (max-width: 600px) {
-.cn-kpi-grid--cols-2[data-v-e31696e2],
-	.cn-kpi-grid--cols-3[data-v-e31696e2],
-	.cn-kpi-grid--cols-4[data-v-e31696e2] {
-		grid-template-columns: minmax(0, 1fr);
-}
-}
-
-
 .cn-export-wizard__description[data-v-59983562] {
 	color: var(--color-text-maxcontrast);
 	margin-bottom: 12px;
@@ -35021,6 +36223,44 @@ button.cn-object-calendar__overflow[data-v-bea31862] {
 	height: var(--cn-board-control-height, 40px);
 }
 
+/* The switch row under the header (screens-dashboard-greeting-header): the
+   view switch left, the `viewLinks` pills right (DqMijnWerk: pills 34px high,
+   radius 17, 13px/600, a 14px icon, primary light on primary deep). */
+.cn-dashboard-page__switch-row[data-v-824052fe] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 10px;
+	margin-bottom: var(--cn-board-section-gap, 20px);
+}
+.cn-dashboard-page__switch-row-spacer[data-v-824052fe] {
+	flex: 1 1 auto;
+}
+.cn-dashboard-page__view-link[data-v-824052fe] {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	height: 34px;
+	padding: 0 12px;
+	border-radius: 17px;
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+	font-size: 13px;
+	font-weight: 600;
+	white-space: nowrap;
+	text-decoration: none !important;
+}
+.cn-dashboard-page__view-link[data-v-824052fe]:hover {
+	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));
+}
+.cn-dashboard-page__view-link[data-v-824052fe]:focus-visible {
+	outline: 2px solid var(--color-main-text);
+	outline-offset: 2px;
+}
+.cn-dashboard-page__view-link-icon[data-v-824052fe] {
+	display: inline-flex;
+}
+
 /* The period group, in a row of its own between the header and the KPI row. */
 .cn-dashboard-page__date-range--segmented[data-v-824052fe] {
 	margin-bottom: 16px;