@conduction/nextcloud-vue 2.127.0 → 2.128.0

package/dist/esm/nextcloud-vue.css

@@ -1726,6 +1726,103 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	align-self: flex-start;
 }
 
+/* ---- Warning and error banners (CnBannerWidget) ------------------------- */
+/* The boards draw a warning or error banner as a tinted box with a 1px edge
+   in its own tone, radius 10, 12px 14px of padding, the text in the main ink
+   (PtInzending "De ontvangstbevestiging kwam niet aan.", PtAccounts
+   "aanmeldingen wachten op goedkeuring"), not NcNoteCard's 4px edge bar. A
+   settings card's notes take the same box, success included
+   (PtBeheerinstellingen "Er is een eigen ondertekeningssleutel ingesteld").
+   @spec openspec/changes/board-banner-note-tone/specs/board-banner-note-tone/spec.md#requirement-a-board-warning-or-error-banner-is-a-tinted-box-with-an-edge-in-its-tone */
+.cn-look-board .cn-banner-widget .notecard.notecard--warning:not(.cn-look-nextcloud *),
+.cn-look-board .settings-section .notecard.notecard--warning:not(.cn-look-nextcloud *) {
+	--cn-banner-ground: color-mix(in srgb, var(--color-warning) 13%, var(--color-main-background));
+	--cn-banner-edge: color-mix(in srgb, var(--color-warning) 50%, var(--color-main-background));
+}
+
+.cn-look-board .cn-banner-widget .notecard.notecard--error:not(.cn-look-nextcloud *),
+.cn-look-board .settings-section .notecard.notecard--error:not(.cn-look-nextcloud *) {
+	--cn-banner-ground: color-mix(in srgb, var(--color-error) 7%, var(--color-main-background));
+	--cn-banner-edge: color-mix(in srgb, var(--color-error) 30%, var(--color-main-background));
+}
+
+.cn-look-board .settings-section .notecard.notecard--success:not(.cn-look-nextcloud *) {
+	--cn-banner-ground: color-mix(in srgb, var(--color-success) 9%, var(--color-main-background));
+	--cn-banner-edge: color-mix(in srgb, var(--color-success) 30%, var(--color-main-background));
+}
+
+.cn-look-board .cn-banner-widget .notecard.notecard--warning:not(.cn-look-nextcloud *),
+.cn-look-board .cn-banner-widget .notecard.notecard--error:not(.cn-look-nextcloud *),
+.cn-look-board .settings-section .notecard.notecard--warning:not(.cn-look-nextcloud *),
+.cn-look-board .settings-section .notecard.notecard--error:not(.cn-look-nextcloud *),
+.cn-look-board .settings-section .notecard.notecard--success:not(.cn-look-nextcloud *) {
+	--note-card-icon-size: 18px;
+	gap: 10px;
+	margin: 0;
+	padding: 12px 14px;
+	border: 1px solid var(--cn-banner-edge);
+	border-radius: 10px;
+	background-color: var(--cn-banner-ground) !important;
+	color: var(--color-main-text) !important;
+	font-size: 14px;
+	line-height: 1.5;
+}
+
+/* A stat-row cell that holds only a banner is the banner: no card around it. */
+.cn-look-board .cn-index-page-widgets__cell .cn-widget-wrapper:has(.cn-banner-widget):not(:has(.cn-widget-wrapper__header)):not(.cn-look-nextcloud *) {
+	border: none;
+	background: transparent;
+}
+
+.cn-look-board .cn-index-page-widgets__cell .cn-widget-wrapper:has(.cn-banner-widget):not(:has(.cn-widget-wrapper__header)):not(.cn-look-nextcloud *) > .cn-widget-wrapper__content {
+	padding: 0;
+}
+
+/* ---- Link tiles (CnTileWidget) ------------------------------------------ */
+/* The board draws a link tile as a rounded card, its icon on the left beside
+   a 15px bold title and a 13px line under it, all left-aligned (PtThemas
+   "Themacatalogus", "Portalen en hun thema's"), not a square with a centred
+   48px icon.
+   @spec openspec/changes/board-link-tile/specs/board-link-tile/spec.md#requirement-a-board-link-tile-is-a-rounded-card-with-its-icon-beside-the-title */
+.cn-look-board .cn-tile-widget:not(.cn-look-nextcloud *) {
+	border-radius: var(--cn-board-card-radius, 12px);
+}
+
+.cn-look-board .cn-tile-widget .cn-tile-widget__link:not(.cn-look-nextcloud *) {
+	flex-direction: row;
+	justify-content: flex-start;
+	gap: 14px;
+	padding: 20px 22px;
+}
+
+.cn-look-board .cn-tile-widget .cn-tile-widget__link:not(.cn-look-nextcloud *):hover {
+	transform: none;
+}
+
+.cn-look-board .cn-tile-widget .cn-tile-widget__icon:not(.cn-look-nextcloud *),
+.cn-look-board .cn-tile-widget .cn-tile-widget__icon--svg:not(.cn-look-nextcloud *) {
+	width: 24px;
+	height: 24px;
+	font-size: 24px;
+}
+
+.cn-look-board .cn-tile-widget .cn-tile-widget__text:not(.cn-look-nextcloud *) {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+
+.cn-look-board .cn-tile-widget .cn-tile-widget__title:not(.cn-look-nextcloud *),
+.cn-look-board .cn-tile-widget .cn-tile-widget__subtitle:not(.cn-look-nextcloud *) {
+	text-align: start;
+}
+
+.cn-look-board .cn-tile-widget .cn-tile-widget__title:not(.cn-look-nextcloud *) {
+	font-size: 15px;
+	line-height: 1.2;
+}
+
 /* A record list's notice is the board's note box too: 10px 14px, radius 10
    (DqZaaktypeOverzicht).
    @spec openspec/changes/board-record-list-notice-box/specs/board-record-list-notice-box/spec.md#requirement-a-board-record-list-notice-is-the-boards-note-box */
@@ -2740,6 +2837,19 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
 	border-radius: 8px;
 }
 
+/* A field's help line sits right under the control in 13px muted ink, flush
+   with the label, as the boards draw it (PtUitnodigen "De uitnodiging met een
+   eenmalige code gaat naar dit adres.", PtAccountUitgeven). The ink carries
+   `!important` against a theme that colours every span and p (thematiq).
+   @spec openspec/changes/board-dialog-field-help/specs/board-dialog-field-help/spec.md#requirement-a-board-dialog-fields-help-line-is-13px-muted-under-the-control */
+.cn-dialog-board .dialog__content .input-field__helper-text-message,
+.cn-dialog-board .dialog__content .textarea__helper-text-message {
+	padding: 4px 0 0;
+	color: var(--color-text-maxcontrast) !important;
+	font-size: 13px;
+	line-height: 1.3;
+}
+
 .cn-dialog-board .dialog__content .input-field:has(.input-field__label) .input-field__input:not(:focus)::placeholder,
 .cn-dialog-board .dialog__content .textarea__input:not(:focus)::placeholder {
 	opacity: 1 !important;
@@ -4983,6 +5093,14 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
 	color: var(--color-primary-element-light-text);
 }
 
+/* A row the manifest marks as asking for attention (`config.rowClass` with
+   `class: "cn-row--attention"`) is tinted warm, as the boards draw the open
+   requests on top of a list (PtToegangsverzoeken, PtUitnodigingen).
+   @spec openspec/changes/board-attention-row/specs/board-attention-row/spec.md#requirement-a-board-table-row-marked-for-attention-is-tinted-warm */
+.cn-look-board .cn-data-table tr.cn-row--attention > td:not(.cn-look-nextcloud *) {
+	background: color-mix(in srgb, var(--color-warning) 4%, var(--color-main-background));
+}
+
 /* ---- A kanban column's show-more button ---------------------------------- */
 /* The board draws "Toon 12 meer" in the soft ink, its dashed edge in the 3:1
    control colour, 6px in at the sides (DqWerkbord); the view draws the main
@@ -5181,6 +5299,18 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
 	text-overflow: ellipsis;
 }
 
+/* The overline of a cell (`columns[].overline` / `overlineText`): muted and
+   smaller, on its own line above the value. Same theme hooks as the
+   secondary line. */
+.cn-data-table .cn-table-cell__overline {
+	display: block;
+	color: var(--cn-table-secondary-color, var(--color-text-maxcontrast));
+	font-size: var(--cn-table-secondary-size, 0.9em);
+	line-height: 1.35;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 /* Back to wrapping, for a column holding prose rather than a label:
    `columns: [{ key: 'description', cellClass: 'cn-cell--wrap' }]`. */
 .cn-data-table th.cn-cell--wrap,
@@ -9195,6 +9325,48 @@ a.cn-kpi-card--board * {
 	flex: 1 1 300px;
 }
 
+/* The band (`config.band`): a wrapping row across the page, above the body
+   and the side column. An entry takes `--cn-band-span` twelfths of the row,
+   less its share of the gaps, and wraps under 220px. It is a full line in the
+   with-side flex row, like every child but the body and the column. */
+.cn-detail-page__band {
+	display: flex;
+	flex-wrap: wrap;
+	gap: calc(5 * var(--default-grid-baseline));
+	margin-block-end: calc(5 * var(--default-grid-baseline));
+}
+
+/* The page filters: a right-aligned row above the band's widgets, a label
+   before each control. */
+.cn-detail-page__page-filters {
+	display: flex;
+	flex: 1 1 100%;
+	flex-wrap: wrap;
+	justify-content: flex-end;
+	align-items: center;
+	gap: calc(2 * var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));
+}
+
+.cn-detail-page__page-filter {
+	display: inline-flex;
+	align-items: center;
+	gap: calc(2 * var(--default-grid-baseline));
+}
+
+.cn-detail-page__page-filter-label {
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+}
+
+.cn-detail-page__band-item {
+	flex: 1 1 calc(var(--cn-band-span, 12) / 12 * 100% - calc(5 * var(--default-grid-baseline)));
+	min-width: min(220px, 100%);
+}
+
+.cn-detail-page__band-item--full {
+	flex-basis: 100%;
+}
+
 .cn-detail-page__side {
 	display: flex;
 	flex-direction: column;
@@ -9855,7 +10027,7 @@ li[data-cn-admin-tag] > .action-link::after {
 }
 
 /* The same for a CnDetailCard (DqTaak "Notities", DqZaakEmail "E-mail",
-   DqZaakTaken "Afspraken", DqHandhaving "Historie"). */
+   DqZaakTaken "Afspraken", DqHandhaving "Historie", PtInzending "Bewijslog"). */
 .cn-look-board.cn-detail-page .cn-detail-card__header .cn-detail-card__icon {
 	display: none;
 }
@@ -15938,6 +16110,18 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	text-overflow: ellipsis;
 }
 
+/* The overline of a cell (`columns[].overline` / `overlineText`): muted and
+   smaller, on its own line above the value. Same theme hooks as the
+   secondary line. */
+.cn-data-table .cn-table-cell__overline {
+	display: block;
+	color: var(--cn-table-secondary-color, var(--color-text-maxcontrast));
+	font-size: var(--cn-table-secondary-size, 0.9em);
+	line-height: 1.35;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 /* Back to wrapping, for a column holding prose rather than a label:
    `columns: [{ key: 'description', cellClass: 'cn-cell--wrap' }]`. */
 .cn-data-table th.cn-cell--wrap,
@@ -47201,7 +47385,7 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 }
 
 
-.cn-tile-widget[data-v-28963e83] {
+.cn-tile-widget[data-v-a62ef4d8] {
 	height: 100%;
 	width: 100%;
 	position: absolute;
@@ -47210,7 +47394,7 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 	overflow: hidden;
 	background-color: var(--cn-tile-bg);
 }
-.cn-tile-widget__link[data-v-28963e83] {
+.cn-tile-widget__link[data-v-a62ef4d8] {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -47224,11 +47408,11 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 	background-color: var(--cn-tile-bg);
 	color: var(--cn-tile-text);
 }
-.cn-tile-widget__link[data-v-28963e83]:hover {
+.cn-tile-widget__link[data-v-a62ef4d8]:hover {
 	transform: scale(1.02);
 	opacity: 0.95;
 }
-.cn-tile-widget__icon[data-v-28963e83] {
+.cn-tile-widget__icon[data-v-a62ef4d8] {
 	font-size: 48px;
 	width: 48px;
 	height: 48px;
@@ -47237,11 +47421,11 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 	justify-content: center;
 	flex-shrink: 0;
 }
-.cn-tile-widget__icon--svg[data-v-28963e83] {
+.cn-tile-widget__icon--svg[data-v-a62ef4d8] {
 	width: 48px;
 	height: 48px;
 }
-.cn-tile-widget__icon span.icon[data-v-28963e83] {
+.cn-tile-widget__icon span.icon[data-v-a62ef4d8] {
 	display: inline-block;
 	width: 48px;
 	height: 48px;
@@ -47251,18 +47435,29 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 /* A CSS-class icon is a dark background-image, so it is inverted to white to
    read against the tint. An untinted tile sits on the page background, where
    white would be invisible in a light theme, so it keeps its own colour. */
-.cn-tile-widget--tinted .cn-tile-widget__icon span.icon[data-v-28963e83] {
+.cn-tile-widget--tinted .cn-tile-widget__icon span.icon[data-v-a62ef4d8] {
 	filter: brightness(0) invert(1);
 }
-.cn-tile-widget__icon img[data-v-28963e83] {
+.cn-tile-widget__icon img[data-v-a62ef4d8] {
 	width: 100%;
 	height: 100%;
 	object-fit: contain;
 }
-.cn-tile-widget__emoji[data-v-28963e83] {
+.cn-tile-widget__emoji[data-v-a62ef4d8] {
 	font-size: 48px;
 }
-.cn-tile-widget__title[data-v-28963e83] {
+
+/* The text block takes no box of its own outside the board look, so the
+   title stays a direct flex item of the link. */
+.cn-tile-widget__text[data-v-a62ef4d8] {
+	display: contents;
+}
+.cn-tile-widget__subtitle[data-v-a62ef4d8] {
+	font-size: 13px;
+	text-align: center;
+	opacity: 0.85;
+}
+.cn-tile-widget__title[data-v-a62ef4d8] {
 	font-size: 16px;
 	font-weight: 700;
 	text-align: center;
@@ -47298,7 +47493,7 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 }
 
 
-.cn-dashboard-page[data-v-61fc1aa7] {
+.cn-dashboard-page[data-v-2853e370] {
 	padding: 20px;
 	max-width: 1800px;
 	/* Centre the leftover space once the cap engages, so a wide screen shows
@@ -47312,7 +47507,7 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 	overflow-y: auto;
 	box-sizing: border-box;
 }
-.cn-dashboard-page__header[data-v-61fc1aa7] {
+.cn-dashboard-page__header[data-v-2853e370] {
 	display: flex;
 	justify-content: space-between;
 	align-items: flex-start;
@@ -47324,21 +47519,21 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 	   room. Only the HEADER shifts right — body widgets keep full width. */
 	padding-inline-start: 56px;
 }
-.cn-dashboard-page__header-left[data-v-61fc1aa7] {
+.cn-dashboard-page__header-left[data-v-2853e370] {
 	min-width: 0;
 }
-.cn-dashboard-page__title-row[data-v-61fc1aa7] {
+.cn-dashboard-page__title-row[data-v-2853e370] {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	gap: 12px;
 }
-.cn-dashboard-page__title[data-v-61fc1aa7] {
+.cn-dashboard-page__title[data-v-2853e370] {
 	margin: 0;
 	font-size: 20px;
 	font-weight: 700;
 }
-.cn-dashboard-page__description[data-v-61fc1aa7] {
+.cn-dashboard-page__description[data-v-2853e370] {
 	margin: 4px 0 0;
 	font-size: 14px;
 	color: var(--color-text-maxcontrast);
@@ -47346,19 +47541,19 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 
 /* 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-61fc1aa7] {
+.cn-dashboard-page--board .cn-dashboard-page__title[data-v-2853e370] {
 	font-size: 28px;
 	font-weight: 700;
 	line-height: 1.2;
 }
-.cn-dashboard-page--board .cn-dashboard-page__description[data-v-61fc1aa7] {
+.cn-dashboard-page--board .cn-dashboard-page__description[data-v-2853e370] {
 	margin: 6px 0 0;
 	font-size: 15px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-61fc1aa7] {
+.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-2853e370] {
 	gap: 10px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-61fc1aa7] .button-vue {
+.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-2853e370] .button-vue {
 	min-height: var(--cn-board-control-height, 40px);
 	height: var(--cn-board-control-height, 40px);
 }
@@ -47366,17 +47561,17 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 /* 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-61fc1aa7] {
+.cn-dashboard-page__switch-row[data-v-2853e370] {
 	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-61fc1aa7] {
+.cn-dashboard-page__switch-row-spacer[data-v-2853e370] {
 	flex: 1 1 auto;
 }
-.cn-dashboard-page__view-link[data-v-61fc1aa7] {
+.cn-dashboard-page__view-link[data-v-2853e370] {
 	display: inline-flex;
 	align-items: center;
 	gap: 6px;
@@ -47390,24 +47585,24 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 	white-space: nowrap;
 	text-decoration: none !important;
 }
-.cn-dashboard-page__view-link[data-v-61fc1aa7]:hover {
+.cn-dashboard-page__view-link[data-v-2853e370]:hover {
 	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));
 }
-.cn-dashboard-page__view-link[data-v-61fc1aa7]:focus-visible {
+.cn-dashboard-page__view-link[data-v-2853e370]:focus-visible {
 	outline: 2px solid var(--color-main-text);
 	outline-offset: 2px;
 }
-.cn-dashboard-page__view-link-icon[data-v-61fc1aa7] {
+.cn-dashboard-page__view-link-icon[data-v-2853e370] {
 	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-61fc1aa7] {
+.cn-dashboard-page__date-range--segmented[data-v-2853e370] {
 	margin-bottom: 16px;
 }
 
 /* The period group at the end of the description line. */
-.cn-dashboard-page__description--with-period[data-v-61fc1aa7] {
+.cn-dashboard-page__description--with-period[data-v-2853e370] {
 	align-items: center;
 	display: flex;
 	flex-wrap: wrap;
@@ -47416,19 +47611,19 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 
 /* A select on the description line takes the width of its choice, not a
    form field's, and no margin of its own. */
-.cn-dashboard-page__description-select[data-v-61fc1aa7] {
+.cn-dashboard-page__description-select[data-v-2853e370] {
 	min-width: 180px;
 	max-width: 280px;
 	margin: 0;
 }
-.cn-dashboard-page__date-segmented[data-v-61fc1aa7] {
+.cn-dashboard-page__date-segmented[data-v-2853e370] {
 	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-61fc1aa7] {
+.cn-dashboard-page__kpi-row[data-v-2853e370] {
 	margin-bottom: var(--cn-board-section-gap, 16px);
 }
 
@@ -47436,15 +47631,15 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
    the cards started a margin to the right of the KPI row and the header. The
    grid reaches out by that margin, so the card edges line up with the page's
    (dashboard-grid-flush). */
-.cn-dashboard-page--board[data-v-61fc1aa7] .cn-dashboard-grid {
+.cn-dashboard-page--board[data-v-2853e370] .cn-dashboard-grid {
 	width: auto;
 	margin-inline: calc(-1 * var(--cn-dashboard-grid-margin, 12px));
 }
-.cn-dashboard-page__kpi-cell[data-v-61fc1aa7] {
+.cn-dashboard-page__kpi-cell[data-v-2853e370] {
 	display: flex;
 	min-width: 0;
 }
-.cn-dashboard-page__kpi-cell[data-v-61fc1aa7] > * {
+.cn-dashboard-page__kpi-cell[data-v-2853e370] > * {
 	flex: 1 1 auto;
 	min-width: 0;
 }
@@ -47457,7 +47652,7 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
    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-61fc1aa7] {
+.cn-dashboard-page__header-actions[data-v-2853e370] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -47473,19 +47668,19 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 
 /* 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-61fc1aa7] {
+.cn-dashboard-page__date-range[data-v-2853e370] {
 	margin-bottom: 12px;
 }
-.cn-dashboard-page__date-range--pills[data-v-61fc1aa7] {
+.cn-dashboard-page__date-range--pills[data-v-2853e370] {
 	margin-bottom: 8px;
 }
-.cn-dashboard-page__date-pills[data-v-61fc1aa7] {
+.cn-dashboard-page__date-pills[data-v-2853e370] {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	gap: 6px;
 }
-.cn-dashboard-page__date-pill[data-v-61fc1aa7] {
+.cn-dashboard-page__date-pill[data-v-2853e370] {
 	display: inline-flex;
 	align-items: center;
 	padding: 5px 14px;
@@ -47500,77 +47695,77 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 	cursor: pointer;
 	transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
 }
-.cn-dashboard-page__date-pill[data-v-61fc1aa7]:hover {
+.cn-dashboard-page__date-pill[data-v-2853e370]:hover {
 	background: var(--color-background-hover);
 }
-.cn-dashboard-page__date-pill[data-v-61fc1aa7]:focus-visible {
+.cn-dashboard-page__date-pill[data-v-2853e370]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
-.cn-dashboard-page__date-pill--active[data-v-61fc1aa7] {
+.cn-dashboard-page__date-pill--active[data-v-2853e370] {
 	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-61fc1aa7]:hover {
+.cn-dashboard-page__date-pill--active[data-v-2853e370]: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-61fc1aa7] {
+.cn-dashboard-page__date-pill--custom[data-v-2853e370] {
 	border-style: dashed;
 	color: var(--color-text-maxcontrast);
 }
-.cn-dashboard-page__date-pill-custom[data-v-61fc1aa7] .action-item__menutoggle {
+.cn-dashboard-page__date-pill-custom[data-v-2853e370] .action-item__menutoggle {
 	min-width: 0;
 	min-height: 0;
 	padding: 0;
 	background: transparent;
 	border: none;
 }
-.cn-dashboard-page__date-pill-custom[data-v-61fc1aa7] .button-vue,
-.cn-dashboard-page__date-pill-custom[data-v-61fc1aa7] .button-vue__wrapper,
-.cn-dashboard-page__date-pill-custom[data-v-61fc1aa7] .button-vue__icon {
+.cn-dashboard-page__date-pill-custom[data-v-2853e370] .button-vue,
+.cn-dashboard-page__date-pill-custom[data-v-2853e370] .button-vue__wrapper,
+.cn-dashboard-page__date-pill-custom[data-v-2853e370] .button-vue__icon {
 	width: auto !important;
 	min-width: 0 !important;
 	overflow: visible !important;
 }
-.cn-dashboard-page__empty[data-v-61fc1aa7] {
+.cn-dashboard-page__empty[data-v-2853e370] {
 	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-61fc1aa7] {
+.cn-dashboard-page__view-switch[data-v-2853e370] {
 	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-61fc1aa7] {
+.cn-page-view-region--empty[data-v-2853e370] {
 	padding: 40px 20px;
 }
-.cn-dashboard-page__page-filters[data-v-61fc1aa7] {
+.cn-dashboard-page__page-filters[data-v-2853e370] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 16px;
 	align-items: flex-end;
 	margin-bottom: 12px;
 }
-.cn-dashboard-page__page-filter[data-v-61fc1aa7] {
+.cn-dashboard-page__page-filter[data-v-2853e370] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 	min-width: 200px;
 }
-.cn-dashboard-page__page-filter-label[data-v-61fc1aa7] {
+.cn-dashboard-page__page-filter-label[data-v-2853e370] {
 	font-size: 0.85em;
 	font-weight: 600;
 	color: var(--color-text-maxcontrast);
 }
-.cn-dashboard-page__widget-edit[data-v-61fc1aa7] {
+.cn-dashboard-page__widget-edit[data-v-2853e370] {
 	position: absolute;
 	top: 4px;
 	inset-inline-end: 4px;
@@ -47589,8 +47784,8 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
    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-61fc1aa7] .cn-widget-wrapper__content,
-.cn-dashboard-page__card-fit.cn-widget-wrapper--flush[data-v-61fc1aa7] .cn-widget-wrapper__content {
+.cn-dashboard-page__card-fit[data-v-2853e370] .cn-widget-wrapper__content,
+.cn-dashboard-page__card-fit.cn-widget-wrapper--flush[data-v-2853e370] .cn-widget-wrapper__content {
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
@@ -47606,7 +47801,7 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
    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-61fc1aa7] .cn-widget-wrapper__content {
+.cn-dashboard-page__chart-fit[data-v-2853e370] .cn-widget-wrapper__content {
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
@@ -47616,13 +47811,13 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 /* 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-61fc1aa7] .cn-stat-widget,
-.cn-dashboard-page__card-fit[data-v-61fc1aa7] .cn-gauge-widget,
-.cn-dashboard-page__card-fit[data-v-61fc1aa7] .cn-delta-widget {
+.cn-dashboard-page__card-fit[data-v-2853e370] .cn-stat-widget,
+.cn-dashboard-page__card-fit[data-v-2853e370] .cn-gauge-widget,
+.cn-dashboard-page__card-fit[data-v-2853e370] .cn-delta-widget {
 	min-width: 0;
 	max-width: 100%;
 }
-.cn-dashboard-page__unknown[data-v-61fc1aa7] {
+.cn-dashboard-page__unknown[data-v-2853e370] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -47633,31 +47828,31 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 }
 
 /* widget-ref content items */
-.cn-dashboard-page__content[data-v-61fc1aa7] {
+.cn-dashboard-page__content[data-v-2853e370] {
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
 }
-.cn-dashboard-page__content-item[data-v-61fc1aa7] {
+.cn-dashboard-page__content-item[data-v-2853e370] {
 	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-61fc1aa7] .cn-widget-wrapper__actions .action-item__menutoggle,
-	.cn-dashboard-page--board[data-v-61fc1aa7] .cn-widget-wrapper__actions .button-vue {
+.cn-dashboard-page--board[data-v-2853e370] .cn-widget-wrapper__actions .action-item__menutoggle,
+	.cn-dashboard-page--board[data-v-2853e370] .cn-widget-wrapper__actions .button-vue {
 		min-height: 44px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__kpi-cell[data-v-61fc1aa7] {
+.cn-dashboard-page--board .cn-dashboard-page__kpi-cell[data-v-2853e370] {
 		min-height: 44px;
 }
 
 	/* The widget Actions menu shows its icon only, so the card title keeps
 	   the room; the name stays for assistive tech. */
-.cn-dashboard-page--board[data-v-61fc1aa7] .cn-widget-wrapper__actions .action-item__menutoggle {
+.cn-dashboard-page--board[data-v-2853e370] .cn-widget-wrapper__actions .action-item__menutoggle {
 		min-width: 44px;
 }
-.cn-dashboard-page--board[data-v-61fc1aa7] .cn-widget-wrapper__actions .action-item__menutoggle .button-vue__text {
+.cn-dashboard-page--board[data-v-2853e370] .cn-widget-wrapper__actions .action-item__menutoggle .button-vue__text {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -47669,7 +47864,7 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 
 /* 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-61fc1aa7] {
+.cn-dashboard-page__widget-count[data-v-2853e370] {
 	align-self: center;
 	padding: 1px 8px;
 	border-radius: 10px;
@@ -47678,13 +47873,13 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 	font-size: 13px;
 	font-weight: 600;
 }
-.cn-dashboard-page__widget-note[data-v-61fc1aa7] {
+.cn-dashboard-page__widget-note[data-v-2853e370] {
 	align-self: center;
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 	white-space: nowrap;
 }
-.cn-dashboard-page__widget-action[data-v-61fc1aa7] {
+.cn-dashboard-page__widget-action[data-v-2853e370] {
 	display: inline-flex;
 	align-items: center;
 	align-self: center;
@@ -47700,7 +47895,7 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 	white-space: nowrap;
 	cursor: pointer;
 }
-.cn-dashboard-page__widget-action[data-v-61fc1aa7]:focus-visible {
+.cn-dashboard-page__widget-action[data-v-2853e370]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }