@conduction/nextcloud-vue 2.82.0 → 2.83.0

package/dist/esm/nextcloud-vue.css

@@ -503,9 +503,20 @@
 	align-items: start;
 }
 
-/* The card: a section of the shell, or a CnSettingsCard of the page. */
+/* An app component that wraps its sections in one element (decidiq's
+   Settings.vue) takes no box of its own: its sections are grid items and
+   cards, as if the shell held them directly. Only an element whose own
+   children are sections; anything else keeps spanning the grid. */
+.cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section),
+.cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) {
+	display: contents;
+}
+
+/* The card: a section of the shell (also one inside a wrapping element), or a CnSettingsCard of the page. */
 .cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > .settings-section,
 .cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > .settings-section,
+.cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section,
+.cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section,
 .cn-look-board .cn-settings-page__sections:not(.cn-look-nextcloud *) > .cn-settings-card {
 	box-sizing: border-box;
 	display: flex;
@@ -532,7 +543,12 @@
 	display: none;
 }
 
+/* NcSettingsSection draws its name `display: inline-flex; justify-content:
+   center`; in the card's flex column the name spans the card, so the title
+   sat centred. The board's card titles start at the left edge. */
 .cn-look-board .settings-section:not(.cn-look-nextcloud *) .settings-section__name {
+	justify-content: flex-start;
+	text-align: start;
 	margin: 0;
 	font-size: 19px;
 	font-weight: 700;
@@ -734,6 +750,21 @@
 	margin-inline-start: auto;
 }
 
+/* The title and meta take the room the pill and the date leave, and a long
+   title wraps inside it: the pill and the date stay on the title line, as the
+   board draws them. They drop under the text only when the card is too narrow
+   to hold 240px of text beside them (PqMijnWerk). */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__main {
+	flex: 1 1 240px;
+}
+
+/* ---- Saved views on a dashboard card (PqMijnWerk) ------------------------ */
+/* The card body is flush, so the list and its empty line carry the card's
+   inset themselves, the same 24px at the sides as a record list. */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-saved-views-widget {
+	padding: 4px 24px 20px;
+}
+
 /* The board draws no chevron after the pill and date. */
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__chevron {
 	display: none;
@@ -4992,6 +5023,17 @@ a.cn-kpi-card--board * {
 	padding: calc(5 * var(--default-grid-baseline));
 }
 
+/* A group heading in the header's Actions menu (`{ heading }` in items), as
+   the board's "Ga naar" and "Selectie": 12px bold capitals, muted. The menu
+   is a popover outside the page, so the class is not under the look class. */
+.cn-index-header-menu__heading {
+	font-size: 12px;
+	font-weight: 700;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+	color: var(--color-text-maxcontrast);
+}
+
 /* The board's header buttons (`headerButtons`) at the end of the title row,
    centred on the title and its count line. They wrap under the title on a
    narrow page. */
@@ -6927,6 +6969,123 @@ a.cn-kpi-card--board * {
 .cn-look-board:has(.cn-detail-page) > .app-sidebar__toggle {
 	display: none;
 }
+/*
+ * The reports page under the board look (screens-reports-page-board-look,
+ * board DcRapportages): a 28px title over a muted lead, one section per
+ * category headed at 18px, and two-up cards with an icon tile. Scoped under
+ * `.cn-look-board` with the page guard, so an app without the look renders as
+ * before.
+ */
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) {
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	gap: var(--cn-board-section-gap);
+	padding: var(--cn-board-content-padding);
+	max-width: var(--cn-board-content-max-width);
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__header {
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+	padding: 4px 0 8px;
+}
+
+/* The 56px inset clears the navigation toggle only while the navigation is
+   closed, as on the other board pages. */
+.cn-look-board:has(.app-navigation--closed) .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__header {
+	padding-inline-start: 56px;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__title {
+	margin: 0;
+	font-size: 28px;
+	font-weight: 700;
+	line-height: 1.2;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__description {
+	margin: 0;
+	font-size: 14px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__section {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	/* A host's own `section` rule (a width cap, a margin) does not reach it. */
+	max-width: none;
+	margin: 0;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__section-title {
+	margin: 0;
+	font-size: 18px;
+	font-weight: 700;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__grid {
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	gap: 14px;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card {
+	box-sizing: border-box;
+	flex-direction: row;
+	align-items: flex-start;
+	gap: 14px;
+	padding: 18px 20px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--cn-board-card-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card:hover,
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card:focus-visible {
+	background: var(--color-background-hover);
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card-icon {
+	flex: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 44px;
+	height: 44px;
+	border-radius: 10px;
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card-text {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card-title {
+	font-size: 17px;
+	font-weight: 700;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card-description {
+	font-size: 14px;
+	line-height: 1.5;
+	color: var(--color-text-maxcontrast);
+}
+
+/* The widgets under the cards sit in the page's own padding: the dashboard
+   inside draws no second frame. */
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__widgets {
+	margin-top: 0;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-dashboard-page {
+	padding: 0;
+}
 /* CnReferencePreview — a reference that shows what it points at. */
 
 .cn-reference-preview {
@@ -22339,6 +22498,214 @@ a.cn-kpi-card--board * {
 .cn-stats-block__breakdown-value--published[data-v-770aba44] { color: var(--color-element-success);
 }
 
+/* ========================================
+   @conduction/nextcloud-vue — Status Badge
+   ======================================== */
+
+/* The two board tones without a Nextcloud colour role (screens-cell-pill-parity).
+   A theme may redefine them; the six role variants below use Nextcloud's own. */
+:root {
+	--cn-status-purple-bg: #e8e6f6;
+	--cn-status-purple-text: #4a3f8f;
+	--cn-status-teal-bg: #e3f1f3;
+	--cn-status-teal-text: #1d5e66;
+}
+
+.cn-status-badge {
+	display: inline-flex;
+	align-items: center;
+	gap: calc(0.5 * var(--default-grid-baseline));
+	padding: calc(0.5 * var(--default-grid-baseline)) calc(2.5 * var(--default-grid-baseline));
+	border-radius: var(--border-radius-pill);
+	font-size: 0.85em;
+	font-weight: 500;
+	line-height: 1.4;
+	white-space: nowrap;
+}
+
+/* Size variants */
+.cn-status-badge--small {
+	padding: calc(0.25 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));
+	font-size: 0.75em;
+}
+
+/* Color variants */
+.cn-status-badge--default {
+	background-color: var(--color-background-dark);
+	color: var(--color-main-text);
+}
+
+.cn-status-badge--primary {
+	background-color: var(--color-primary-element-light);
+	color: var(--color-primary-element);
+}
+
+.cn-status-badge--success {
+	background-color: var(--color-success-light, rgba(70, 186, 97, 0.15));
+	color: var(--color-success-text, var(--color-success));
+}
+
+.cn-status-badge--warning {
+	background-color: var(--color-warning-light, rgba(232, 163, 39, 0.15));
+	color: var(--color-warning-text, var(--color-warning));
+}
+
+.cn-status-badge--error {
+	background-color: var(--color-error-light, rgba(224, 68, 68, 0.15));
+	color: var(--color-error-text, var(--color-error));
+}
+
+.cn-status-badge--info {
+	background-color: var(--color-info-light, rgba(0, 130, 201, 0.15));
+	color: var(--color-info-text, var(--color-info, #0082c9));
+}
+
+/* Work in progress ("In behandeling"), a board tone. */
+.cn-status-badge--purple {
+	background-color: var(--cn-status-purple-bg);
+	color: var(--cn-status-purple-text);
+}
+
+/* Handed on ("Omgezet naar een zaak"), a board tone. */
+.cn-status-badge--teal {
+	background-color: var(--cn-status-teal-bg);
+	color: var(--cn-status-teal-text);
+}
+
+/* Solid variants — solid background with white text for use on colored backgrounds */
+.cn-status-badge--solid.cn-status-badge--default {
+	background-color: var(--color-background-dark);
+	color: var(--color-main-text);
+}
+
+.cn-status-badge--solid.cn-status-badge--primary {
+	background-color: var(--color-primary-element);
+	color: white;
+}
+
+.cn-status-badge--solid.cn-status-badge--success {
+	background-color: var(--color-success);
+	color: white;
+}
+
+.cn-status-badge--solid.cn-status-badge--warning {
+	background-color: var(--color-warning);
+	color: var(--color-primary-text);
+}
+
+.cn-status-badge--solid.cn-status-badge--error {
+	background-color: var(--color-error);
+	color: white;
+}
+
+.cn-status-badge--solid.cn-status-badge--info {
+	background-color: var(--color-info, #0082c9);
+	color: white;
+}
+
+.cn-status-badge--solid.cn-status-badge--purple {
+	background-color: var(--cn-status-purple-text);
+	color: white;
+}
+
+.cn-status-badge--solid.cn-status-badge--teal {
+	background-color: var(--cn-status-teal-text);
+	color: white;
+}
+
+
+/*
+ * The card itself — its box, body stack, icon circle, title and value
+ * typography — is the CANONICAL KPI card in src/css/kpi-card.css, shared with
+ * CnStatsBlock. What remains here is only what is specific to THIS widget: the
+ * range select, the "/ limit" denominator, the trend chip and the error glyph.
+ *
+ * Every size below is expressed against the shared `--cn-kpi-*` scale rather
+ * than as its own number, so the widget's extras re-scale with the card they
+ * sit in. Resist adding card styling back, and resist restating a value the
+ * scale already holds; that is what split the two KPI looks apart in the first
+ * place.
+ */
+
+/* The title row carries an optional range select beside the label, which the
+   canonical `__title` (a plain truncating heading) does not account for. */
+.cn-stat-widget__label[data-v-644c38a1] {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	width: 100%;
+}
+
+/* Stacked tile: the label and its range select centre over the number rather
+   than spreading to the card's edges. */
+.cn-kpi-card--vertical .cn-stat-widget__label[data-v-644c38a1] {
+	justify-content: center;
+	width: auto;
+}
+
+/* Sized down to sit inside the label row without pushing the tile taller —
+   the tile's height is fixed by its grid cell (ADR-062). */
+.cn-stat-widget__range[data-v-644c38a1] {
+	flex: 0 0 auto;
+	max-width: 50%;
+	padding: 0 4px;
+	border: none;
+	border-radius: var(--border-radius);
+	background: transparent;
+	color: var(--cn-kpi-label-color, var(--color-text-maxcontrast));
+	font-size: var(--cn-kpi-label-size, 13px);
+	font-weight: normal;
+	cursor: pointer;
+}
+.cn-stat-widget__range[data-v-644c38a1]:hover,
+.cn-stat-widget__range[data-v-644c38a1]:focus-visible {
+	background: var(--color-background-hover);
+	color: var(--color-main-text);
+}
+
+/* Badge mode: the pill takes the value's place in the row. Sized to the
+   card's label scale so it sits in the row without pushing the tile taller. */
+.cn-stat-widget__badge[data-v-644c38a1] {
+	flex: 0 1 auto;
+	min-width: 0;
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-size: var(--cn-kpi-label-size, 13px);
+}
+
+/* The denominator of a "value / limit" pair. Deliberately quieter and smaller
+   than the value: the tile's subject is what the number IS, not what it is
+   allowed to reach. Shares the value's `nowrap` so the pair never breaks. */
+.cn-stat-widget__limit[data-v-644c38a1] {
+	flex: 0 0 auto;
+	font-size: var(--cn-kpi-value-size-compact, 1.25rem);
+	font-weight: var(--cn-kpi-title-weight, 600);
+	line-height: var(--cn-kpi-value-line, 1.1);
+	color: var(--cn-kpi-label-color, var(--color-text-maxcontrast));
+	white-space: nowrap;
+}
+.cn-stat-widget__trend[data-v-644c38a1] {
+	display: inline-flex;
+	align-items: center;
+	gap: 2px;
+	font-size: var(--cn-kpi-label-size, 13px);
+	font-weight: var(--cn-kpi-title-weight, 600);
+}
+
+/* The dash shown when the number could not be fetched. It stands where the
+   value stands, so it takes the value's size and weight — CnStatsBlock's own
+   error dash is literally a `cn-kpi-card__value`, and two components showing
+   the same failure at two different sizes is the drift this consolidation
+   exists to remove. Only the colour differs: a failure is not a number. */
+.cn-stat-widget__error[data-v-644c38a1] {
+	font-size: var(--cn-kpi-value-size, 2rem);
+	font-weight: var(--cn-kpi-value-weight, 700);
+	line-height: var(--cn-kpi-value-line, 1.1);
+	color: var(--cn-kpi-label-color, var(--color-text-maxcontrast));
+}
+
 
 /*
  * This widget draws no KPI of its own — every tile it shows is a CnStatsBlock,
@@ -22372,67 +22739,81 @@ a.cn-kpi-card--board * {
  * modes render this root, so both collapse. The bug was found on a
  * single-entry stats-block.
  */
-.cn-stats-block-widget[data-v-75d3ad28] {
+.cn-stats-block-widget[data-v-c1220134] {
 	flex: 1 1 auto;
 	min-width: 0;
 	width: 100%;
 }
-.cn-stats-block-widget--multi[data-v-75d3ad28] {
+.cn-stats-block-widget--multi[data-v-c1220134] {
 	display: flex;
 	flex-direction: column;
 	gap: var(--cn-kpi-stack-gap, 12px);
 }
 
 /* Rows layout: the board's "label left, number right" card body. */
-.cn-stats-block-widget--rows[data-v-75d3ad28] {
+.cn-stats-block-widget--rows[data-v-c1220134] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
 	box-sizing: border-box;
 	padding: 20px 22px;
 }
-.cn-stats-block-widget__rows-title[data-v-75d3ad28] {
+.cn-stats-block-widget__rows-title[data-v-c1220134] {
 	margin: 0;
 	font-size: 15px;
 	font-weight: 600;
 	color: var(--color-text-maxcontrast);
 }
-.cn-stats-block-widget__rows[data-v-75d3ad28] {
+.cn-stats-block-widget--grid[data-v-c1220134] {
+	padding: 4px 24px 20px;
+}
+.cn-stats-block-widget__grid[data-v-c1220134] {
+	display: grid;
+	grid-template-columns: repeat(var(--cn-stats-block-columns, 2), minmax(0, 1fr));
+	gap: 16px 20px;
+}
+
+/* A tile in the grid is a part of the card, not a card: no box, no inset. */
+.cn-stats-block-widget__grid-stat[data-v-c1220134] {
+	padding: 0;
+	min-width: 0;
+}
+.cn-stats-block-widget__rows[data-v-c1220134] {
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
 	margin: 0;
 	font-size: 14px;
 }
-.cn-stats-block-widget__row[data-v-75d3ad28] {
+.cn-stats-block-widget__row[data-v-c1220134] {
 	display: flex;
 	align-items: baseline;
 	justify-content: space-between;
 	gap: 16px;
 }
-.cn-stats-block-widget__row-label[data-v-75d3ad28] {
+.cn-stats-block-widget__row-label[data-v-c1220134] {
 	min-width: 0;
 	margin: 0;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.cn-stats-block-widget__row-value[data-v-75d3ad28] {
+.cn-stats-block-widget__row-value[data-v-c1220134] {
 	flex: none;
 	margin: 0;
 	font-size: 17px;
 	font-weight: 700;
 	text-align: right;
 }
-.cn-stats-block-widget__row-value--success[data-v-75d3ad28] {
+.cn-stats-block-widget__row-value--success[data-v-c1220134] {
 	color: var(--color-text-success, var(--color-success-text));
 }
-.cn-stats-block-widget__row-value--warning[data-v-75d3ad28] {
+.cn-stats-block-widget__row-value--warning[data-v-c1220134] {
 	color: var(--color-text-warning, var(--color-warning-text));
 }
-.cn-stats-block-widget__row-value--error[data-v-75d3ad28] {
+.cn-stats-block-widget__row-value--error[data-v-c1220134] {
 	color: var(--color-text-error, var(--color-error-text));
 }
-.cn-stats-block-widget__row-value--primary[data-v-75d3ad28] {
+.cn-stats-block-widget__row-value--primary[data-v-c1220134] {
 	color: var(--color-primary-element);
 }
 
@@ -28066,214 +28447,6 @@ tr.file-picker__row td.row-name[data-v-1f96131b] {
 	background: transparent;
 }
 
-/* ========================================
-   @conduction/nextcloud-vue — Status Badge
-   ======================================== */
-
-/* The two board tones without a Nextcloud colour role (screens-cell-pill-parity).
-   A theme may redefine them; the six role variants below use Nextcloud's own. */
-:root {
-	--cn-status-purple-bg: #e8e6f6;
-	--cn-status-purple-text: #4a3f8f;
-	--cn-status-teal-bg: #e3f1f3;
-	--cn-status-teal-text: #1d5e66;
-}
-
-.cn-status-badge {
-	display: inline-flex;
-	align-items: center;
-	gap: calc(0.5 * var(--default-grid-baseline));
-	padding: calc(0.5 * var(--default-grid-baseline)) calc(2.5 * var(--default-grid-baseline));
-	border-radius: var(--border-radius-pill);
-	font-size: 0.85em;
-	font-weight: 500;
-	line-height: 1.4;
-	white-space: nowrap;
-}
-
-/* Size variants */
-.cn-status-badge--small {
-	padding: calc(0.25 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));
-	font-size: 0.75em;
-}
-
-/* Color variants */
-.cn-status-badge--default {
-	background-color: var(--color-background-dark);
-	color: var(--color-main-text);
-}
-
-.cn-status-badge--primary {
-	background-color: var(--color-primary-element-light);
-	color: var(--color-primary-element);
-}
-
-.cn-status-badge--success {
-	background-color: var(--color-success-light, rgba(70, 186, 97, 0.15));
-	color: var(--color-success-text, var(--color-success));
-}
-
-.cn-status-badge--warning {
-	background-color: var(--color-warning-light, rgba(232, 163, 39, 0.15));
-	color: var(--color-warning-text, var(--color-warning));
-}
-
-.cn-status-badge--error {
-	background-color: var(--color-error-light, rgba(224, 68, 68, 0.15));
-	color: var(--color-error-text, var(--color-error));
-}
-
-.cn-status-badge--info {
-	background-color: var(--color-info-light, rgba(0, 130, 201, 0.15));
-	color: var(--color-info-text, var(--color-info, #0082c9));
-}
-
-/* Work in progress ("In behandeling"), a board tone. */
-.cn-status-badge--purple {
-	background-color: var(--cn-status-purple-bg);
-	color: var(--cn-status-purple-text);
-}
-
-/* Handed on ("Omgezet naar een zaak"), a board tone. */
-.cn-status-badge--teal {
-	background-color: var(--cn-status-teal-bg);
-	color: var(--cn-status-teal-text);
-}
-
-/* Solid variants — solid background with white text for use on colored backgrounds */
-.cn-status-badge--solid.cn-status-badge--default {
-	background-color: var(--color-background-dark);
-	color: var(--color-main-text);
-}
-
-.cn-status-badge--solid.cn-status-badge--primary {
-	background-color: var(--color-primary-element);
-	color: white;
-}
-
-.cn-status-badge--solid.cn-status-badge--success {
-	background-color: var(--color-success);
-	color: white;
-}
-
-.cn-status-badge--solid.cn-status-badge--warning {
-	background-color: var(--color-warning);
-	color: var(--color-primary-text);
-}
-
-.cn-status-badge--solid.cn-status-badge--error {
-	background-color: var(--color-error);
-	color: white;
-}
-
-.cn-status-badge--solid.cn-status-badge--info {
-	background-color: var(--color-info, #0082c9);
-	color: white;
-}
-
-.cn-status-badge--solid.cn-status-badge--purple {
-	background-color: var(--cn-status-purple-text);
-	color: white;
-}
-
-.cn-status-badge--solid.cn-status-badge--teal {
-	background-color: var(--cn-status-teal-text);
-	color: white;
-}
-
-
-/*
- * The card itself — its box, body stack, icon circle, title and value
- * typography — is the CANONICAL KPI card in src/css/kpi-card.css, shared with
- * CnStatsBlock. What remains here is only what is specific to THIS widget: the
- * range select, the "/ limit" denominator, the trend chip and the error glyph.
- *
- * Every size below is expressed against the shared `--cn-kpi-*` scale rather
- * than as its own number, so the widget's extras re-scale with the card they
- * sit in. Resist adding card styling back, and resist restating a value the
- * scale already holds; that is what split the two KPI looks apart in the first
- * place.
- */
-
-/* The title row carries an optional range select beside the label, which the
-   canonical `__title` (a plain truncating heading) does not account for. */
-.cn-stat-widget__label[data-v-50eb91c3] {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-	width: 100%;
-}
-
-/* Stacked tile: the label and its range select centre over the number rather
-   than spreading to the card's edges. */
-.cn-kpi-card--vertical .cn-stat-widget__label[data-v-50eb91c3] {
-	justify-content: center;
-	width: auto;
-}
-
-/* Sized down to sit inside the label row without pushing the tile taller —
-   the tile's height is fixed by its grid cell (ADR-062). */
-.cn-stat-widget__range[data-v-50eb91c3] {
-	flex: 0 0 auto;
-	max-width: 50%;
-	padding: 0 4px;
-	border: none;
-	border-radius: var(--border-radius);
-	background: transparent;
-	color: var(--cn-kpi-label-color, var(--color-text-maxcontrast));
-	font-size: var(--cn-kpi-label-size, 13px);
-	font-weight: normal;
-	cursor: pointer;
-}
-.cn-stat-widget__range[data-v-50eb91c3]:hover,
-.cn-stat-widget__range[data-v-50eb91c3]:focus-visible {
-	background: var(--color-background-hover);
-	color: var(--color-main-text);
-}
-
-/* Badge mode: the pill takes the value's place in the row. Sized to the
-   card's label scale so it sits in the row without pushing the tile taller. */
-.cn-stat-widget__badge[data-v-50eb91c3] {
-	flex: 0 1 auto;
-	min-width: 0;
-	max-width: 100%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	font-size: var(--cn-kpi-label-size, 13px);
-}
-
-/* The denominator of a "value / limit" pair. Deliberately quieter and smaller
-   than the value: the tile's subject is what the number IS, not what it is
-   allowed to reach. Shares the value's `nowrap` so the pair never breaks. */
-.cn-stat-widget__limit[data-v-50eb91c3] {
-	flex: 0 0 auto;
-	font-size: var(--cn-kpi-value-size-compact, 1.25rem);
-	font-weight: var(--cn-kpi-title-weight, 600);
-	line-height: var(--cn-kpi-value-line, 1.1);
-	color: var(--cn-kpi-label-color, var(--color-text-maxcontrast));
-	white-space: nowrap;
-}
-.cn-stat-widget__trend[data-v-50eb91c3] {
-	display: inline-flex;
-	align-items: center;
-	gap: 2px;
-	font-size: var(--cn-kpi-label-size, 13px);
-	font-weight: var(--cn-kpi-title-weight, 600);
-}
-
-/* The dash shown when the number could not be fetched. It stands where the
-   value stands, so it takes the value's size and weight — CnStatsBlock's own
-   error dash is literally a `cn-kpi-card__value`, and two components showing
-   the same failure at two different sizes is the drift this consolidation
-   exists to remove. Only the colour differs: a failure is not a number. */
-.cn-stat-widget__error[data-v-50eb91c3] {
-	font-size: var(--cn-kpi-value-size, 2rem);
-	font-weight: var(--cn-kpi-value-weight, 700);
-	line-height: var(--cn-kpi-value-line, 1.1);
-	color: var(--cn-kpi-label-color, var(--color-text-maxcontrast));
-}
-
 
 .cn-delta-form[data-v-59878180] {
 	display: flex;
@@ -29199,35 +29372,44 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 }
 
 
-.cn-settings-form[data-v-66086856] {
+.cn-settings-form[data-v-7325a0ee] {
 	display: flex;
 	flex-direction: column;
 	gap: 14px;
 	min-width: 0;
 }
-.cn-settings-form__grid[data-v-66086856] {
+.cn-settings-form__grid[data-v-7325a0ee] {
 	display: grid;
 	gap: 14px 16px;
 	grid-template-columns: minmax(0, 1fr);
 }
-.cn-settings-form__grid--2[data-v-66086856] {
+.cn-settings-form__grid--2[data-v-7325a0ee] {
 	grid-template-columns: repeat(2, minmax(0, 1fr));
 }
-.cn-settings-form__field[data-v-66086856] {
+.cn-settings-form__field[data-v-7325a0ee] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 	min-width: 0;
 }
-.cn-settings-form__field--wide[data-v-66086856] {
+.cn-settings-form__field--wide[data-v-7325a0ee] {
 	grid-column: 1 / -1;
 }
-.cn-settings-form__label[data-v-66086856] {
+.cn-settings-form__label[data-v-7325a0ee] {
 	font-size: 13px;
 	font-weight: 600;
 	color: var(--color-main-text);
 }
-.cn-settings-form__control[data-v-66086856] {
+.cn-settings-form__reference[data-v-7325a0ee] {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+.cn-settings-form__sublabel[data-v-7325a0ee] {
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-settings-form__control[data-v-7325a0ee] {
 	width: 100%;
 	box-sizing: border-box;
 	height: var(--cn-board-control-height, 40px);
@@ -29238,13 +29420,13 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	color: var(--color-main-text);
 	font: inherit;
 }
-.cn-settings-form__file[data-v-66086856] {
+.cn-settings-form__file[data-v-7325a0ee] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 8px;
 }
-.cn-settings-form__control--file[data-v-66086856] {
+.cn-settings-form__control--file[data-v-7325a0ee] {
 	display: inline-flex;
 	align-items: center;
 	width: auto;
@@ -29252,64 +29434,64 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	flex: 0 1 auto;
 	overflow-wrap: anywhere;
 }
-.cn-settings-form__control--placeholder[data-v-66086856] {
+.cn-settings-form__control--placeholder[data-v-7325a0ee] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-settings-form__control--area[data-v-66086856] {
+.cn-settings-form__control--area[data-v-7325a0ee] {
 	height: auto;
 	padding: 10px 12px;
 	resize: vertical;
 }
-.cn-settings-form__control[data-v-66086856]:focus-visible {
+.cn-settings-form__control[data-v-7325a0ee]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 1px;
 }
-.cn-settings-form__hint[data-v-66086856],
-.cn-settings-form__error[data-v-66086856] {
+.cn-settings-form__hint[data-v-7325a0ee],
+.cn-settings-form__error[data-v-7325a0ee] {
 	margin: 0;
 	font-size: 12px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-settings-form__error[data-v-66086856] {
+.cn-settings-form__error[data-v-7325a0ee] {
 	color: var(--color-error-text);
 }
-.cn-settings-form__actions[data-v-66086856] {
+.cn-settings-form__actions[data-v-7325a0ee] {
 	display: flex;
 	justify-content: flex-start;
 }
 @media (max-width: 640px) {
-.cn-settings-form__grid--2[data-v-66086856] {
+.cn-settings-form__grid--2[data-v-7325a0ee] {
 		grid-template-columns: minmax(0, 1fr);
 }
 }
 
 
-.cn-switch-rows[data-v-7a6ac51c] {
+.cn-switch-rows[data-v-21bccfa9] {
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
 	min-width: 0;
 }
-.cn-switch-rows__list[data-v-7a6ac51c] {
+.cn-switch-rows__list[data-v-21bccfa9] {
 	list-style: none;
 	margin: 0;
 	padding: 0;
 	display: flex;
 	flex-direction: column;
 }
-.cn-switch-rows__row[data-v-7a6ac51c] {
+.cn-switch-rows__row[data-v-21bccfa9] {
 	padding: 10px 0;
 	border-top: 1px solid var(--cn-board-hairline, var(--color-border));
 }
-.cn-switch-rows__row[data-v-7a6ac51c]:first-child {
+.cn-switch-rows__row[data-v-21bccfa9]:first-child {
 	border-top: none;
 	padding-top: 0;
 }
-.cn-switch-rows__label[data-v-7a6ac51c] {
+.cn-switch-rows__label[data-v-21bccfa9] {
 	display: block;
 	font-weight: 600;
 }
-.cn-switch-rows__hint[data-v-7a6ac51c] {
+.cn-switch-rows__hint[data-v-21bccfa9] {
 	display: block;
 	font-size: 12px;
 	font-weight: 400;
@@ -29317,7 +29499,7 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 }
 
 
-.cn-radio-cards[data-v-3b685691] {
+.cn-radio-cards[data-v-8ac292d6] {
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
@@ -29326,23 +29508,23 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	padding: 0;
 	border: 0;
 }
-.cn-radio-cards__legend[data-v-3b685691] {
+.cn-radio-cards__legend[data-v-8ac292d6] {
 	padding: 0;
 	margin-bottom: 6px;
 	font-weight: 600;
 }
-.cn-radio-cards__grid[data-v-3b685691] {
+.cn-radio-cards__grid[data-v-8ac292d6] {
 	display: grid;
 	gap: 10px;
 	grid-template-columns: minmax(0, 1fr);
 }
-.cn-radio-cards__grid--2[data-v-3b685691] {
+.cn-radio-cards__grid--2[data-v-8ac292d6] {
 	grid-template-columns: repeat(2, minmax(0, 1fr));
 }
-.cn-radio-cards__grid--3[data-v-3b685691] {
+.cn-radio-cards__grid--3[data-v-8ac292d6] {
 	grid-template-columns: repeat(3, minmax(0, 1fr));
 }
-.cn-radio-cards__card[data-v-3b685691] {
+.cn-radio-cards__card[data-v-8ac292d6] {
 	position: relative;
 	display: flex;
 	align-items: flex-start;
@@ -29353,25 +29535,25 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	background: var(--color-main-background);
 	cursor: pointer;
 }
-.cn-radio-cards__card--selected[data-v-3b685691] {
+.cn-radio-cards__card--selected[data-v-8ac292d6] {
 	border-color: var(--color-primary-element);
 	background: var(--color-primary-element-light);
 	box-shadow: 0 0 0 1px var(--color-primary-element);
 }
-.cn-radio-cards__card[data-v-3b685691]:focus-within {
+.cn-radio-cards__card[data-v-8ac292d6]:focus-within {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
 
 /* The real input stays in the DOM and in the accessibility tree; the dot is its picture. */
-.cn-radio-cards__input[data-v-3b685691] {
+.cn-radio-cards__input[data-v-8ac292d6] {
 	position: absolute;
 	opacity: 0;
 	inset: 0;
 	margin: 0;
 	cursor: pointer;
 }
-.cn-radio-cards__dot[data-v-3b685691] {
+.cn-radio-cards__dot[data-v-8ac292d6] {
 	flex: 0 0 auto;
 	width: 14px;
 	height: 14px;
@@ -29381,25 +29563,54 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	border-radius: 50%;
 	background: var(--color-main-background);
 }
-.cn-radio-cards__card--selected .cn-radio-cards__dot[data-v-3b685691] {
+.cn-radio-cards__card--selected .cn-radio-cards__dot[data-v-8ac292d6] {
 	border: 4px solid var(--color-primary-element);
 }
-.cn-radio-cards__text[data-v-3b685691] {
+.cn-radio-cards__text[data-v-8ac292d6] {
 	display: flex;
 	flex-direction: column;
 	gap: 2px;
 	min-width: 0;
 }
-.cn-radio-cards__title[data-v-3b685691] {
+.cn-radio-cards__title[data-v-8ac292d6] {
 	font-weight: 600;
 }
-.cn-radio-cards__description[data-v-3b685691] {
+.cn-radio-cards__description[data-v-8ac292d6] {
 	font-size: 12px;
 	color: var(--color-text-maxcontrast);
 }
+
+/* `variant: "list"`: one radio button per line, the description under the
+   label, no card around each (board DcBeheer, "Soort organisatie"). */
+.cn-radio-cards--list .cn-radio-cards__grid[data-v-8ac292d6] {
+	gap: 8px;
+}
+.cn-radio-cards--list .cn-radio-cards__card[data-v-8ac292d6],
+.cn-radio-cards--list .cn-radio-cards__card--selected[data-v-8ac292d6] {
+	padding: 0;
+	border: 0;
+	border-radius: 0;
+	background: transparent;
+	box-shadow: none;
+	font-size: 15px;
+}
+.cn-radio-cards--list .cn-radio-cards__dot[data-v-8ac292d6] {
+	width: 18px;
+	height: 18px;
+	margin-top: 2px;
+}
+.cn-radio-cards--list .cn-radio-cards__card--selected .cn-radio-cards__dot[data-v-8ac292d6] {
+	border-width: 5px;
+}
+.cn-radio-cards--list .cn-radio-cards__title[data-v-8ac292d6] {
+	font-weight: 400;
+}
+.cn-radio-cards--list .cn-radio-cards__description[data-v-8ac292d6] {
+	font-size: 13px;
+}
 @media (max-width: 640px) {
-.cn-radio-cards__grid--2[data-v-3b685691],
-	.cn-radio-cards__grid--3[data-v-3b685691] {
+.cn-radio-cards__grid--2[data-v-8ac292d6],
+	.cn-radio-cards__grid--3[data-v-8ac292d6] {
 		grid-template-columns: minmax(0, 1fr);
 }
 }
@@ -33982,28 +34193,28 @@ to {
 }
 
 
-.cn-admin-settings-shell[data-v-533044f8] {
+.cn-admin-settings-shell[data-v-2f22ff08] {
 	max-width: 900px;
 }
 
 /* The board look lifts the width and lays the header and cards on a grid (look-board.css). */
-.cn-support-info[data-v-533044f8] {
+.cn-support-info[data-v-2f22ff08] {
 	margin-top: 16px;
 	padding-top: 16px;
 	border-top: 1px solid var(--color-border);
 }
-.cn-support-info h4[data-v-533044f8] {
+.cn-support-info h4[data-v-2f22ff08] {
 	margin: 0 0 8px 0;
 	font-size: 14px;
 	font-weight: 600;
 	color: var(--color-main-text);
 }
-.cn-support-info p[data-v-533044f8] {
+.cn-support-info p[data-v-2f22ff08] {
 	margin: 4px 0;
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 }
-.cn-support-info a[data-v-533044f8] {
+.cn-support-info a[data-v-2f22ff08] {
 	color: var(--color-primary-element);
 }
 
@@ -37505,7 +37716,7 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 }
 
 
-.cn-dashboard-page[data-v-b753474e] {
+.cn-dashboard-page[data-v-4475ac48] {
 	padding: 20px;
 	max-width: 1800px;
 	/* Centre the leftover space once the cap engages, so a wide screen shows
@@ -37519,7 +37730,7 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 	overflow-y: auto;
 	box-sizing: border-box;
 }
-.cn-dashboard-page__header[data-v-b753474e] {
+.cn-dashboard-page__header[data-v-4475ac48] {
 	display: flex;
 	justify-content: space-between;
 	align-items: flex-start;
@@ -37531,21 +37742,21 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 	   room. Only the HEADER shifts right — body widgets keep full width. */
 	padding-inline-start: 56px;
 }
-.cn-dashboard-page__header-left[data-v-b753474e] {
+.cn-dashboard-page__header-left[data-v-4475ac48] {
 	min-width: 0;
 }
-.cn-dashboard-page__title-row[data-v-b753474e] {
+.cn-dashboard-page__title-row[data-v-4475ac48] {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	gap: 12px;
 }
-.cn-dashboard-page__title[data-v-b753474e] {
+.cn-dashboard-page__title[data-v-4475ac48] {
 	margin: 0;
 	font-size: 20px;
 	font-weight: 700;
 }
-.cn-dashboard-page__description[data-v-b753474e] {
+.cn-dashboard-page__description[data-v-4475ac48] {
 	margin: 4px 0 0;
 	font-size: 14px;
 	color: var(--color-text-maxcontrast);
@@ -37553,19 +37764,19 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 
 /* Board look (screens-dashboard-parity): h1 28/700, a 15px grey subtitle 6px
    under it, and 40px buttons with a 10px gap. */
-.cn-dashboard-page--board .cn-dashboard-page__title[data-v-b753474e] {
+.cn-dashboard-page--board .cn-dashboard-page__title[data-v-4475ac48] {
 	font-size: 28px;
 	font-weight: 700;
 	line-height: 1.2;
 }
-.cn-dashboard-page--board .cn-dashboard-page__description[data-v-b753474e] {
+.cn-dashboard-page--board .cn-dashboard-page__description[data-v-4475ac48] {
 	margin: 6px 0 0;
 	font-size: 15px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-b753474e] {
+.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-4475ac48] {
 	gap: 10px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-b753474e] .button-vue {
+.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-4475ac48] .button-vue {
 	min-height: var(--cn-board-control-height, 40px);
 	height: var(--cn-board-control-height, 40px);
 }
@@ -37573,17 +37784,17 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 /* 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-b753474e] {
+.cn-dashboard-page__switch-row[data-v-4475ac48] {
 	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-b753474e] {
+.cn-dashboard-page__switch-row-spacer[data-v-4475ac48] {
 	flex: 1 1 auto;
 }
-.cn-dashboard-page__view-link[data-v-b753474e] {
+.cn-dashboard-page__view-link[data-v-4475ac48] {
 	display: inline-flex;
 	align-items: center;
 	gap: 6px;
@@ -37597,36 +37808,36 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 	white-space: nowrap;
 	text-decoration: none !important;
 }
-.cn-dashboard-page__view-link[data-v-b753474e]:hover {
+.cn-dashboard-page__view-link[data-v-4475ac48]:hover {
 	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));
 }
-.cn-dashboard-page__view-link[data-v-b753474e]:focus-visible {
+.cn-dashboard-page__view-link[data-v-4475ac48]:focus-visible {
 	outline: 2px solid var(--color-main-text);
 	outline-offset: 2px;
 }
-.cn-dashboard-page__view-link-icon[data-v-b753474e] {
+.cn-dashboard-page__view-link-icon[data-v-4475ac48] {
 	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-b753474e] {
+.cn-dashboard-page__date-range--segmented[data-v-4475ac48] {
 	margin-bottom: 16px;
 }
-.cn-dashboard-page__date-segmented[data-v-b753474e] {
+.cn-dashboard-page__date-segmented[data-v-4475ac48] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
 }
 
 /* The KPI row above the grid: tiles are cells of the auto-fit grid. */
-.cn-dashboard-page__kpi-row[data-v-b753474e] {
+.cn-dashboard-page__kpi-row[data-v-4475ac48] {
 	margin-bottom: var(--cn-board-section-gap, 16px);
 }
-.cn-dashboard-page__kpi-cell[data-v-b753474e] {
+.cn-dashboard-page__kpi-cell[data-v-4475ac48] {
 	display: flex;
 	min-width: 0;
 }
-.cn-dashboard-page__kpi-cell[data-v-b753474e] > * {
+.cn-dashboard-page__kpi-cell[data-v-4475ac48] > * {
 	flex: 1 1 auto;
 	min-width: 0;
 }
@@ -37639,7 +37850,7 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
    scoped chip rules then silently don't match and the chip collapses into
    NcActions' ~30px icon slot (text wraps to "Last / 30 / days"). The
    data-testid is stable across chunks, so those rules match regardless. */
-.cn-dashboard-page__header-actions[data-v-b753474e] {
+.cn-dashboard-page__header-actions[data-v-4475ac48] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -37655,19 +37866,19 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 
 /* Date-range header band. Kept compact so it doesn't open a tall gap
    above the grid; the pills variant is a single tidy toggle row. */
-.cn-dashboard-page__date-range[data-v-b753474e] {
+.cn-dashboard-page__date-range[data-v-4475ac48] {
 	margin-bottom: 12px;
 }
-.cn-dashboard-page__date-range--pills[data-v-b753474e] {
+.cn-dashboard-page__date-range--pills[data-v-4475ac48] {
 	margin-bottom: 8px;
 }
-.cn-dashboard-page__date-pills[data-v-b753474e] {
+.cn-dashboard-page__date-pills[data-v-4475ac48] {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	gap: 6px;
 }
-.cn-dashboard-page__date-pill[data-v-b753474e] {
+.cn-dashboard-page__date-pill[data-v-4475ac48] {
 	display: inline-flex;
 	align-items: center;
 	padding: 5px 14px;
@@ -37682,77 +37893,77 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 	cursor: pointer;
 	transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
 }
-.cn-dashboard-page__date-pill[data-v-b753474e]:hover {
+.cn-dashboard-page__date-pill[data-v-4475ac48]:hover {
 	background: var(--color-background-hover);
 }
-.cn-dashboard-page__date-pill[data-v-b753474e]:focus-visible {
+.cn-dashboard-page__date-pill[data-v-4475ac48]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
-.cn-dashboard-page__date-pill--active[data-v-b753474e] {
+.cn-dashboard-page__date-pill--active[data-v-4475ac48] {
 	background: var(--color-primary-element);
 	border-color: var(--color-primary-element);
 	color: var(--color-primary-element-text);
 }
-.cn-dashboard-page__date-pill--active[data-v-b753474e]:hover {
+.cn-dashboard-page__date-pill--active[data-v-4475ac48]:hover {
 	background: var(--color-primary-element-hover, var(--color-primary-element));
 }
 
 /* The custom-range pill is de-emphasised — dashed outline, muted text —
    so it reads as an escape hatch rather than a primary option. */
-.cn-dashboard-page__date-pill--custom[data-v-b753474e] {
+.cn-dashboard-page__date-pill--custom[data-v-4475ac48] {
 	border-style: dashed;
 	color: var(--color-text-maxcontrast);
 }
-.cn-dashboard-page__date-pill-custom[data-v-b753474e] .action-item__menutoggle {
+.cn-dashboard-page__date-pill-custom[data-v-4475ac48] .action-item__menutoggle {
 	min-width: 0;
 	min-height: 0;
 	padding: 0;
 	background: transparent;
 	border: none;
 }
-.cn-dashboard-page__date-pill-custom[data-v-b753474e] .button-vue,
-.cn-dashboard-page__date-pill-custom[data-v-b753474e] .button-vue__wrapper,
-.cn-dashboard-page__date-pill-custom[data-v-b753474e] .button-vue__icon {
+.cn-dashboard-page__date-pill-custom[data-v-4475ac48] .button-vue,
+.cn-dashboard-page__date-pill-custom[data-v-4475ac48] .button-vue__wrapper,
+.cn-dashboard-page__date-pill-custom[data-v-4475ac48] .button-vue__icon {
 	width: auto !important;
 	min-width: 0 !important;
 	overflow: visible !important;
 }
-.cn-dashboard-page__empty[data-v-b753474e] {
+.cn-dashboard-page__empty[data-v-4475ac48] {
 	padding: 60px 20px;
 }
 
 /* The page's view switch on a page without a header row: at the end of its
    own row, above the grids, where the header would have put it. */
-.cn-dashboard-page__view-switch[data-v-b753474e] {
+.cn-dashboard-page__view-switch[data-v-4475ac48] {
 	display: flex;
 	justify-content: flex-end;
 	margin-bottom: 12px;
 }
 
 /* A view the switch shows with nothing to draw. */
-.cn-page-view-region--empty[data-v-b753474e] {
+.cn-page-view-region--empty[data-v-4475ac48] {
 	padding: 40px 20px;
 }
-.cn-dashboard-page__page-filters[data-v-b753474e] {
+.cn-dashboard-page__page-filters[data-v-4475ac48] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 16px;
 	align-items: flex-end;
 	margin-bottom: 12px;
 }
-.cn-dashboard-page__page-filter[data-v-b753474e] {
+.cn-dashboard-page__page-filter[data-v-4475ac48] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 	min-width: 200px;
 }
-.cn-dashboard-page__page-filter-label[data-v-b753474e] {
+.cn-dashboard-page__page-filter-label[data-v-4475ac48] {
 	font-size: 0.85em;
 	font-weight: 600;
 	color: var(--color-text-maxcontrast);
 }
-.cn-dashboard-page__widget-edit[data-v-b753474e] {
+.cn-dashboard-page__widget-edit[data-v-4475ac48] {
 	position: absolute;
 	top: 4px;
 	inset-inline-end: 4px;
@@ -37771,8 +37982,8 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
    and centre the card. */
 /* `safe` centre so an overflowing tile does not spill out of the top, where
    flex overflow cannot be scrolled back to. Same as detail-page.css. */
-.cn-dashboard-page__card-fit[data-v-b753474e] .cn-widget-wrapper__content,
-.cn-dashboard-page__card-fit.cn-widget-wrapper--flush[data-v-b753474e] .cn-widget-wrapper__content {
+.cn-dashboard-page__card-fit[data-v-4475ac48] .cn-widget-wrapper__content,
+.cn-dashboard-page__card-fit.cn-widget-wrapper--flush[data-v-4475ac48] .cn-widget-wrapper__content {
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
@@ -37788,7 +37999,7 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
    shows up as a scrollbar the user has to drag to see the whole graph. Same
    shape as the card-fit rule above, minus the padding: chart tiles render
    `flush`, and apexcharts already draws its own margins. */
-.cn-dashboard-page__chart-fit[data-v-b753474e] .cn-widget-wrapper__content {
+.cn-dashboard-page__chart-fit[data-v-4475ac48] .cn-widget-wrapper__content {
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
@@ -37798,13 +38009,13 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 /* Card content (stat / gauge / delta) must fit the tile width: let the
    widget shrink and its value/label truncate instead of pushing past the
    tile edge (the horizontal clip on long currency values). */
-.cn-dashboard-page__card-fit[data-v-b753474e] .cn-stat-widget,
-.cn-dashboard-page__card-fit[data-v-b753474e] .cn-gauge-widget,
-.cn-dashboard-page__card-fit[data-v-b753474e] .cn-delta-widget {
+.cn-dashboard-page__card-fit[data-v-4475ac48] .cn-stat-widget,
+.cn-dashboard-page__card-fit[data-v-4475ac48] .cn-gauge-widget,
+.cn-dashboard-page__card-fit[data-v-4475ac48] .cn-delta-widget {
 	min-width: 0;
 	max-width: 100%;
 }
-.cn-dashboard-page__unknown[data-v-b753474e] {
+.cn-dashboard-page__unknown[data-v-4475ac48] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -37815,29 +38026,29 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 }
 
 /* widget-ref content items */
-.cn-dashboard-page__content[data-v-b753474e] {
+.cn-dashboard-page__content[data-v-4475ac48] {
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
 }
-.cn-dashboard-page__content-item[data-v-b753474e] {
+.cn-dashboard-page__content-item[data-v-4475ac48] {
 	width: 100%;
 }
 /* On a phone (screens-dashboard-phone) the touch targets of a board dashboard
    are 44px: the widget Actions menu and the KPI tiles. */
 @media (max-width: 640px) {
-.cn-dashboard-page--board[data-v-b753474e] .cn-widget-wrapper__actions .action-item__menutoggle,
-	.cn-dashboard-page--board[data-v-b753474e] .cn-widget-wrapper__actions .button-vue {
+.cn-dashboard-page--board[data-v-4475ac48] .cn-widget-wrapper__actions .action-item__menutoggle,
+	.cn-dashboard-page--board[data-v-4475ac48] .cn-widget-wrapper__actions .button-vue {
 		min-height: 44px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__kpi-cell[data-v-b753474e] {
+.cn-dashboard-page--board .cn-dashboard-page__kpi-cell[data-v-4475ac48] {
 		min-height: 44px;
 }
 }
 
 /* What a registry widget reports for its card header (`header` event): the
    note beside the link ("3 in total") and one action, as on a detail page. */
-.cn-dashboard-page__widget-count[data-v-b753474e] {
+.cn-dashboard-page__widget-count[data-v-4475ac48] {
 	align-self: center;
 	padding: 1px 8px;
 	border-radius: 10px;
@@ -37846,13 +38057,13 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 	font-size: 13px;
 	font-weight: 600;
 }
-.cn-dashboard-page__widget-note[data-v-b753474e] {
+.cn-dashboard-page__widget-note[data-v-4475ac48] {
 	align-self: center;
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 	white-space: nowrap;
 }
-.cn-dashboard-page__widget-action[data-v-b753474e] {
+.cn-dashboard-page__widget-action[data-v-4475ac48] {
 	display: inline-flex;
 	align-items: center;
 	align-self: center;
@@ -37868,7 +38079,7 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 	white-space: nowrap;
 	cursor: pointer;
 }
-.cn-dashboard-page__widget-action[data-v-b753474e]:focus-visible {
+.cn-dashboard-page__widget-action[data-v-4475ac48]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
@@ -40202,33 +40413,33 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 }
 
 
-.cn-reports-page[data-v-7597ff10] {
+.cn-reports-page[data-v-7629715a] {
 	padding: 16px;
 }
 
 /* Clear the Nextcloud navigation toggle button (44px wide, absolutely
    positioned at the left edge of .app-content) plus 12px breathing room, as
    CnPageHeader does. Only the header shifts; the body keeps the full width. */
-.cn-reports-page__header[data-v-7597ff10] {
+.cn-reports-page__header[data-v-7629715a] {
 	padding-inline-start: 56px;
 }
-.cn-reports-page__title[data-v-7597ff10] {
+.cn-reports-page__title[data-v-7629715a] {
 	margin: 0 0 4px;
 }
-.cn-reports-page__description[data-v-7597ff10] {
+.cn-reports-page__description[data-v-7629715a] {
 	margin: 0 0 16px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-reports-page__filter[data-v-7597ff10] {
+.cn-reports-page__filter[data-v-7629715a] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
 	margin-bottom: 16px;
 }
-.cn-reports-page__filter-select[data-v-7597ff10] {
+.cn-reports-page__filter-select[data-v-7629715a] {
 	min-width: 220px;
 }
-.cn-reports-page__grid[data-v-7597ff10] {
+.cn-reports-page__grid[data-v-7629715a] {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
 	gap: 12px;
@@ -40236,7 +40447,7 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	margin: 0;
 	padding: 0;
 }
-.cn-reports-page__card[data-v-7597ff10] {
+.cn-reports-page__card[data-v-7629715a] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
@@ -40247,22 +40458,22 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	color: inherit;
 	text-decoration: none;
 }
-.cn-reports-page__card[data-v-7597ff10]:hover,
-.cn-reports-page__card[data-v-7597ff10]:focus {
+.cn-reports-page__card[data-v-7629715a]:hover,
+.cn-reports-page__card[data-v-7629715a]:focus {
 	background-color: var(--color-background-hover);
 }
-.cn-reports-page__card-title[data-v-7597ff10] {
+.cn-reports-page__card-title[data-v-7629715a] {
 	font-weight: bold;
 }
-.cn-reports-page__card-description[data-v-7597ff10],
-.cn-reports-page__card-category[data-v-7597ff10] {
+.cn-reports-page__card-description[data-v-7629715a],
+.cn-reports-page__card-category[data-v-7629715a] {
 	color: var(--color-text-maxcontrast);
 	font-size: 0.9em;
 }
-.cn-reports-page__empty[data-v-7597ff10] {
+.cn-reports-page__empty[data-v-7629715a] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-reports-page__widgets[data-v-7597ff10] {
+.cn-reports-page__widgets[data-v-7629715a] {
 	margin-top: 20px;
 }