@conduction/nextcloud-vue 2.112.0 → 2.113.0

package/dist/esm/nextcloud-vue.css

@@ -420,11 +420,8 @@
    end of a tab strip) is the board's neutral control: the main background, a
    grey border, the main text at 600 (DqZaak), not Nextcloud's primary tint.
    NcActions marks a secondary menu `action-item--secondary` on its root and
-   keeps a class given to it off, so the rule reads that marker. The label
-   hands its ink to --nldesign-color-on-surface for a theme that forces the
-   body ink onto every span (thematiq). */
+   keeps a class given to it off, so the rule reads that marker. */
 .cn-look-board .action-item.action-item--secondary .action-item__menutoggle.button-vue--secondary:not(.cn-look-nextcloud *) {
-	--nldesign-color-on-surface: var(--color-main-text);
 	border: 1px solid var(--cn-board-control-border);
 	border-radius: var(--cn-board-control-radius);
 	background: var(--color-main-background);
@@ -1231,14 +1228,6 @@
 	color: var(--cn-status-badge-ink);
 }
 
-/* A pill paints its own pairing of ink and fill. A theme that forces the body
-   ink onto every span (thematiq's text rule, `!important` at id level) reads
-   that ink from --nldesign-color-on-surface when the surface sets it, so the
-   pill hands it its own ink: "In behandeling" stays purple on purple. */
-.cn-look-board .cn-status-badge:not(.cn-look-nextcloud *) {
-	--nldesign-color-on-surface: var(--cn-status-badge-ink);
-}
-
 /* ---- Info notes (NcNoteCard type="info") -------------------------------- */
 /* The board's info note is a light-blue rounded box: no edge bar, 12px 14px
    of padding, radius 8, an 18px icon 10px before the text, 14px text in the
@@ -1290,9 +1279,7 @@
    hairline under each pair (DqZaak "Zaakgegevens"), the horizontal layout as
    two columns of 14px text, the label column as wide as its longest label
    (the side cards). Both at the board's line height, 1.2, not Nextcloud's 1.5:
-   a pair is 47px tall on the board. The muted label also hands its ink to
-   --nldesign-color-on-surface, which a theme that forces the body ink onto
-   every div (thematiq) reads. */
+   a pair is 47px tall on the board. */
 .cn-look-board .cn-detail-grid.cn-detail-grid--grid:not(.cn-look-nextcloud *) {
 	gap: 12px 24px;
 	font-size: 15px;
@@ -1323,7 +1310,6 @@
 }
 
 .cn-look-board .cn-detail-grid .cn-detail-grid__label:not(.cn-look-nextcloud *) {
-	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	min-width: 0;
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
@@ -2222,7 +2208,6 @@
 	margin-inline-start: auto;
 	padding: 1px 8px;
 	border-radius: 10px;
-	--nldesign-color-on-surface: var(--cn-board-text-soft, var(--color-main-text));
 	background-color: var(--color-main-background);
 	color: var(--cn-board-text-soft, var(--color-main-text));
 	font-size: 12px;
@@ -2745,26 +2730,19 @@
 	outline-offset: 2px;
 }
 
-/* The selected chip is light on dark, so it hands its ink to
-   --nldesign-color-on-surface: thematiq forces the body ink onto every span
-   with `!important` and reads it from that property, which left the label
-   dark on dark. */
+/* The selected chip is light on dark. */
 .cn-look-board .cn-saved-views__chips .cn-saved-views__chip--selected,
 .cn-look-board .cn-saved-views__chips .cn-saved-views__chip--selected:hover,
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab--active,
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab--active:hover {
-	--nldesign-color-on-surface: var(--color-main-background);
 	border-color: transparent;
 	background: var(--color-main-text);
 	color: var(--color-main-background);
 }
 
-/* The count badge: grey on an idle chip, soft text colour on the selected one.
-   Its ink also goes to --nldesign-color-on-surface, which a theme that forces
-   the body ink onto every span (thematiq) reads. */
+/* The count badge: grey on an idle chip, soft text colour on the selected one. */
 .cn-look-board .cn-saved-views__chip .cn-saved-views__chip-count,
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__count {
-	--nldesign-color-on-surface: var(--cn-board-text-soft);
 	min-width: 0;
 	padding: 1px 7px;
 	border: 0;
@@ -2782,7 +2760,6 @@
 /* On the selected chip the count is the soft ink as a lighter bubble on the
    dark chip (DqZaken: #3d4047 on #1b1c1d). */
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab--active .cn-quick-filter-bar__count {
-	--nldesign-color-on-surface: var(--color-primary-element-text);
 	background: var(--cn-board-text-soft);
 	color: var(--color-primary-element-text);
 }
@@ -2862,8 +2839,6 @@
 	margin-inline-start: 6px;
 	padding: 0 6px;
 	border-radius: 10px;
-	/* A theme that forces the body ink onto every span reads it from here. */
-	--nldesign-color-on-surface: var(--color-primary-element-text);
 	background: var(--color-primary-element);
 	color: var(--color-primary-element-text);
 	font-size: 12px;
@@ -3093,15 +3068,13 @@
 }
 
 /* The header row is near-white on the boards (#fafbfc), not the hover grey,
-   its labels 14px muted. The ink also goes to --nldesign-color-on-surface,
-   which a theme that forces the body ink onto every span (thematiq) reads.
+   its labels 14px muted.
    The nldesign theme paints every `th` with `!important` through its table
    header tokens, and the sort button in it through its button weight token
    (bold), so the cell hands the board's ground, ink and weight to those
    tokens too.
    @spec openspec/changes/board-table-head-theme/specs/board-table-head-theme/spec.md#requirement-a-board-table-header-keeps-the-boards-ground-ink-and-weight-under-a-theme */
 .cn-look-board .cn-table-container--board .cn-data-table th {
-	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	--nldesign-component-table-header-background-color: var(--cn-board-table-head-bg, color-mix(in srgb, var(--color-background-hover) 40%, var(--color-main-background)));
 	--nldesign-component-table-header-color: var(--color-text-maxcontrast);
 	--nldesign-component-table-header-font-weight: 600;
@@ -3235,7 +3208,6 @@
 }
 
 .cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title .cn-table-cell__secondary {
-	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 	font-weight: 400;
@@ -3280,7 +3252,6 @@
 /* The initials sit on the light primary tint in the primary ink, the board's
    person chip (DqZaken's Behandelaar, and most boards' people). */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-cell-renderer__avatar-initials {
-	--nldesign-color-on-surface: var(--color-primary-element-light-text);
 	background: var(--color-primary-element-light);
 	color: var(--color-primary-element-light-text);
 	font-size: 12px;
@@ -5742,12 +5713,14 @@ a.cn-kpi-card--board * {
    ======================================== */
 
 /* 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. */
+   A theme may redefine them, or name the NL Design System hue tint and pill
+   text (`--nl-color-<hue>-light`, `--nl-color-<hue>-text`), which the tones
+   and the four role variants below read first (status-badge-hue-tokens). */
 :root {
-	--cn-status-purple-bg: #e8e6f6;
-	--cn-status-purple-text: #4a3f8f;
-	--cn-status-teal-bg: #e3f1f3;
-	--cn-status-teal-text: #1d5e66;
+	--cn-status-purple-bg: var(--nl-color-purple-light, #e8e6f6);
+	--cn-status-purple-text: var(--nl-color-purple-text, #4a3f8f);
+	--cn-status-teal-bg: var(--nl-color-teal-light, #e3f1f3);
+	--cn-status-teal-text: var(--nl-color-teal-text, #1d5e66);
 }
 
 .cn-status-badge {
@@ -5782,26 +5755,26 @@ a.cn-kpi-card--board * {
 }
 
 .cn-status-badge--success {
-	--cn-status-badge-ink: var(--color-success-text, var(--color-success));
-	background-color: var(--color-success-light, rgba(70, 186, 97, 0.15));
+	--cn-status-badge-ink: var(--nl-color-green-text, var(--color-success-text, var(--color-success)));
+	background-color: var(--nl-color-green-light, var(--color-success-light, rgba(70, 186, 97, 0.15)));
 	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--warning {
-	--cn-status-badge-ink: var(--color-warning-text, var(--color-warning));
-	background-color: var(--color-warning-light, rgba(232, 163, 39, 0.15));
+	--cn-status-badge-ink: var(--nl-color-orange-text, var(--color-warning-text, var(--color-warning)));
+	background-color: var(--nl-color-orange-light, var(--color-warning-light, rgba(232, 163, 39, 0.15)));
 	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--error {
-	--cn-status-badge-ink: var(--color-error-text, var(--color-error));
-	background-color: var(--color-error-light, rgba(224, 68, 68, 0.15));
+	--cn-status-badge-ink: var(--nl-color-red-text, var(--color-error-text, var(--color-error)));
+	background-color: var(--nl-color-red-light, var(--color-error-light, rgba(224, 68, 68, 0.15)));
 	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--info {
-	--cn-status-badge-ink: var(--color-info-text, var(--color-info, #0082c9));
-	background-color: var(--color-info-light, rgba(0, 130, 201, 0.15));
+	--cn-status-badge-ink: var(--nl-color-blue-text, var(--color-info-text, var(--color-info, #0082c9)));
+	background-color: var(--nl-color-blue-light, var(--color-info-light, rgba(0, 130, 201, 0.15)));
 	color: var(--cn-status-badge-ink);
 }
 
@@ -25473,12 +25446,14 @@ a.cn-kpi-card--board * {
    ======================================== */
 
 /* 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. */
+   A theme may redefine them, or name the NL Design System hue tint and pill
+   text (`--nl-color-<hue>-light`, `--nl-color-<hue>-text`), which the tones
+   and the four role variants below read first (status-badge-hue-tokens). */
 :root {
-	--cn-status-purple-bg: #e8e6f6;
-	--cn-status-purple-text: #4a3f8f;
-	--cn-status-teal-bg: #e3f1f3;
-	--cn-status-teal-text: #1d5e66;
+	--cn-status-purple-bg: var(--nl-color-purple-light, #e8e6f6);
+	--cn-status-purple-text: var(--nl-color-purple-text, #4a3f8f);
+	--cn-status-teal-bg: var(--nl-color-teal-light, #e3f1f3);
+	--cn-status-teal-text: var(--nl-color-teal-text, #1d5e66);
 }
 
 .cn-status-badge {
@@ -25513,26 +25488,26 @@ a.cn-kpi-card--board * {
 }
 
 .cn-status-badge--success {
-	--cn-status-badge-ink: var(--color-success-text, var(--color-success));
-	background-color: var(--color-success-light, rgba(70, 186, 97, 0.15));
+	--cn-status-badge-ink: var(--nl-color-green-text, var(--color-success-text, var(--color-success)));
+	background-color: var(--nl-color-green-light, var(--color-success-light, rgba(70, 186, 97, 0.15)));
 	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--warning {
-	--cn-status-badge-ink: var(--color-warning-text, var(--color-warning));
-	background-color: var(--color-warning-light, rgba(232, 163, 39, 0.15));
+	--cn-status-badge-ink: var(--nl-color-orange-text, var(--color-warning-text, var(--color-warning)));
+	background-color: var(--nl-color-orange-light, var(--color-warning-light, rgba(232, 163, 39, 0.15)));
 	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--error {
-	--cn-status-badge-ink: var(--color-error-text, var(--color-error));
-	background-color: var(--color-error-light, rgba(224, 68, 68, 0.15));
+	--cn-status-badge-ink: var(--nl-color-red-text, var(--color-error-text, var(--color-error)));
+	background-color: var(--nl-color-red-light, var(--color-error-light, rgba(224, 68, 68, 0.15)));
 	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--info {
-	--cn-status-badge-ink: var(--color-info-text, var(--color-info, #0082c9));
-	background-color: var(--color-info-light, rgba(0, 130, 201, 0.15));
+	--cn-status-badge-ink: var(--nl-color-blue-text, var(--color-info-text, var(--color-info, #0082c9)));
+	background-color: var(--nl-color-blue-light, var(--color-info-light, rgba(0, 130, 201, 0.15)));
 	color: var(--cn-status-badge-ink);
 }
 
@@ -33708,7 +33683,7 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-76cc4
 }
 
 
-.cn-action-buttons[data-v-49607313] {
+.cn-action-buttons[data-v-0f9733ca] {
 	display: inline-flex;
 	align-items: center;
 	gap: 8px;
@@ -33718,7 +33693,7 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-76cc4
 /* In menu mode the only children are dialogs, so the wrapper must not be a
    box: an empty inline-flex child still eats one of the header's flex gaps
    and pushes the Actions menu away from the Edit button beside it. */
-.cn-action-buttons--menu[data-v-49607313] {
+.cn-action-buttons--menu[data-v-0f9733ca] {
 	display: contents;
 }
 
@@ -38936,26 +38911,26 @@ to {
   text-decoration: underline;
 }
 @charset "UTF-8";
-.cn-choice-cards[data-v-22c5fe42] {
+.cn-choice-cards[data-v-59d71736] {
   border: none;
   padding: 0;
   margin: 0;
   min-inline-size: 0;
 }
 
-.cn-choice-cards__legend[data-v-22c5fe42] {
+.cn-choice-cards__legend[data-v-59d71736] {
   padding: 0;
   margin-block-end: 8px;
   font-weight: bold;
 }
 
-.cn-choice-cards__loading[data-v-22c5fe42] {
+.cn-choice-cards__loading[data-v-59d71736] {
   display: flex;
   justify-content: center;
   padding: 24px 0;
 }
 
-.cn-choice-cards__grid[data-v-22c5fe42] {
+.cn-choice-cards__grid[data-v-59d71736] {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 12px;
@@ -38967,26 +38942,26 @@ to {
   padding: 12px;
 }
 
-.cn-choice-cards__cell[data-v-22c5fe42] {
+.cn-choice-cards__cell[data-v-59d71736] {
   display: flex;
   flex-direction: column;
   gap: 8px;
   min-inline-size: 0;
 }
 
-.cn-choice-cards__actions[data-v-22c5fe42] {
+.cn-choice-cards__actions[data-v-59d71736] {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
 
-.cn-choice-cards__option[data-v-22c5fe42] {
+.cn-choice-cards__option[data-v-59d71736] {
   position: relative;
   display: block;
   cursor: pointer;
 }
 
-.cn-choice-cards__input[data-v-22c5fe42] {
+.cn-choice-cards__input[data-v-59d71736] {
   position: absolute;
   inset-block-start: 16px;
   inset-inline-end: 14px;
@@ -38996,7 +38971,7 @@ to {
 }
 
 /* Room for the input, so a long title never runs underneath it. */
-.cn-choice-cards__option[data-v-22c5fe42] .cn-card {
+.cn-choice-cards__option[data-v-59d71736] .cn-card {
   padding-inline-end: 44px;
   transition: box-shadow 0.2s ease, border-color 0.2s ease;
 }
@@ -39007,33 +38982,33 @@ to {
    touches a card, and the grid twitches. The border colour below already
    carries hover, so the scale is dropped: at (0,3,0) this beats the global
    `.cn-card:hover` at (0,2,0). */
-.cn-choice-cards__option[data-v-22c5fe42]:hover .cn-card {
+.cn-choice-cards__option[data-v-59d71736]:hover .cn-card {
   border-color: var(--color-primary-element);
   transform: none;
 }
 
 /* The focus ring belongs on the card, not on the small input inside it. */
-.cn-choice-cards__input[data-v-22c5fe42]:focus-visible + .cn-card {
+.cn-choice-cards__input[data-v-59d71736]:focus-visible + .cn-card {
   outline: 2px solid var(--color-primary-element);
   outline-offset: 2px;
 }
 
-.cn-choice-cards__input[data-v-22c5fe42]:disabled {
+.cn-choice-cards__input[data-v-59d71736]:disabled {
   cursor: default;
 }
 
-.cn-choice-cards__option--disabled .cn-choice-cards__input[data-v-22c5fe42] + .cn-card {
+.cn-choice-cards__option--disabled .cn-choice-cards__input[data-v-59d71736] + .cn-card {
   opacity: 0.6;
 }
 
-.cn-choice-cards__rows[data-v-22c5fe42] {
+.cn-choice-cards__rows[data-v-59d71736] {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
 /* 12px 14px, as the boards draw an option row (DqVolgendeStap, DqBesluit). */
-.cn-choice-cards__row[data-v-22c5fe42] {
+.cn-choice-cards__row[data-v-59d71736] {
   display: flex;
   align-items: flex-start;
   gap: 12px;
@@ -39044,12 +39019,12 @@ to {
   cursor: pointer;
 }
 
-.cn-choice-cards__row[data-v-22c5fe42]:hover {
+.cn-choice-cards__row[data-v-59d71736]:hover {
   border-color: var(--color-border-dark);
 }
 
-.cn-choice-cards__row--selected[data-v-22c5fe42],
-.cn-choice-cards__row--selected[data-v-22c5fe42]:hover {
+.cn-choice-cards__row--selected[data-v-59d71736],
+.cn-choice-cards__row--selected[data-v-59d71736]:hover {
   border-color: var(--color-primary-element);
   /* The second pixel of the 2px selected border, without moving the content. */
   box-shadow: inset 0 0 0 1px var(--color-primary-element);
@@ -39058,9 +39033,8 @@ to {
 
 /* An option this record does not allow: the grey ground and the muted ink,
    still legible (DqVolgendeStap), not faded. */
-.cn-choice-cards__row--disabled[data-v-22c5fe42],
-.cn-choice-cards__row--disabled[data-v-22c5fe42]:hover {
-  --nldesign-color-on-surface: var(--color-text-maxcontrast);
+.cn-choice-cards__row--disabled[data-v-59d71736],
+.cn-choice-cards__row--disabled[data-v-59d71736]:hover {
   border-color: var(--color-border);
   background: var(--color-background-hover);
   color: var(--color-text-maxcontrast);
@@ -39069,82 +39043,80 @@ to {
 
 /* The title takes the muted ink itself: a theme that colours every label
    with `!important` (thematiq) would otherwise hand it the label colour. */
-.cn-choice-cards__row--disabled .cn-choice-cards__row-title[data-v-22c5fe42] {
-  --nldesign-color-on-surface: var(--color-text-maxcontrast);
+.cn-choice-cards__row--disabled .cn-choice-cards__row-title[data-v-59d71736] {
   color: var(--color-text-maxcontrast);
 }
 
 /* The chosen option's fields share the selected row's frame: the cell draws
    the 2px primary border and the ground, the row inside it draws none, and
    the fields sit under the text, indented to it (DqVolgendeStap). */
-.cn-choice-cards__cell--with-details[data-v-22c5fe42] {
+.cn-choice-cards__cell--with-details[data-v-59d71736] {
   border: 1px solid var(--color-primary-element);
   border-radius: var(--border-radius-large, 8px);
   box-shadow: inset 0 0 0 1px var(--color-primary-element);
   background: var(--color-primary-element-light);
 }
 
-.cn-choice-cards__cell--with-details .cn-choice-cards__row[data-v-22c5fe42],
-.cn-choice-cards__cell--with-details .cn-choice-cards__row[data-v-22c5fe42]:hover {
+.cn-choice-cards__cell--with-details .cn-choice-cards__row[data-v-59d71736],
+.cn-choice-cards__cell--with-details .cn-choice-cards__row[data-v-59d71736]:hover {
   border-color: transparent;
   box-shadow: none;
   background: transparent;
 }
 
-.cn-choice-cards__details[data-v-22c5fe42] {
+.cn-choice-cards__details[data-v-59d71736] {
   display: flex;
   flex-direction: column;
   gap: 14px;
   padding: 0 14px 14px 44px;
 }
 
-.cn-choice-cards__row--readonly[data-v-22c5fe42] {
+.cn-choice-cards__row--readonly[data-v-59d71736] {
   cursor: default;
 }
 
-.cn-choice-cards__row--readonly[data-v-22c5fe42]:not(.cn-choice-cards__row--selected):hover {
+.cn-choice-cards__row--readonly[data-v-59d71736]:not(.cn-choice-cards__row--selected):hover {
   border-color: var(--color-border);
 }
 
-.cn-choice-cards__row[data-v-22c5fe42]:has(.cn-choice-cards__row-input:focus-visible) {
+.cn-choice-cards__row[data-v-59d71736]:has(.cn-choice-cards__row-input:focus-visible) {
   outline: 2px solid var(--color-primary-element);
   outline-offset: 2px;
 }
 
-.cn-choice-cards__row-input[data-v-22c5fe42] {
+.cn-choice-cards__row-input[data-v-59d71736] {
   flex: none;
   margin: 2px 0 0;
   accent-color: var(--color-primary-element);
   cursor: inherit;
 }
 
-.cn-choice-cards__row-icon[data-v-22c5fe42] {
+.cn-choice-cards__row-icon[data-v-59d71736] {
   flex: none;
 }
 
-.cn-choice-cards__row-text[data-v-22c5fe42] {
+.cn-choice-cards__row-text[data-v-59d71736] {
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 0;
 }
 
-.cn-choice-cards__row-title[data-v-22c5fe42] {
+.cn-choice-cards__row-title[data-v-59d71736] {
   font-size: 15px;
   font-weight: 600;
 }
 
 /* Regular weight on the span itself: a theme that sets every label bold
    with `!important` (thematiq) reaches a span that only inherits. */
-.cn-choice-cards__row-description[data-v-22c5fe42],
-.cn-choice-cards__reason[data-v-22c5fe42] {
-  --nldesign-color-on-surface: var(--color-text-maxcontrast);
+.cn-choice-cards__row-description[data-v-59d71736],
+.cn-choice-cards__reason[data-v-59d71736] {
   font-size: 13px;
   font-weight: 400;
   color: var(--color-text-maxcontrast);
 }
 
-.cn-choice-cards__reason--card[data-v-22c5fe42] {
+.cn-choice-cards__reason--card[data-v-59d71736] {
   display: block;
   margin-block-start: 4px;
 }
@@ -39320,7 +39292,6 @@ to {
 	margin-inline-start: auto;
 	padding: 1px 8px;
 	border-radius: 10px;
-	--nldesign-color-on-surface: var(--cn-board-text-soft, var(--color-main-text));
 	background-color: var(--color-main-background);
 	color: var(--cn-board-text-soft, var(--color-main-text));
 	font-size: 12px;
@@ -42685,7 +42656,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 }
 
 
-.cn-dashboard-page[data-v-347a8f78] {
+.cn-dashboard-page[data-v-0270abf8] {
 	padding: 20px;
 	max-width: 1800px;
 	/* Centre the leftover space once the cap engages, so a wide screen shows
@@ -42699,7 +42670,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	overflow-y: auto;
 	box-sizing: border-box;
 }
-.cn-dashboard-page__header[data-v-347a8f78] {
+.cn-dashboard-page__header[data-v-0270abf8] {
 	display: flex;
 	justify-content: space-between;
 	align-items: flex-start;
@@ -42711,21 +42682,21 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	   room. Only the HEADER shifts right — body widgets keep full width. */
 	padding-inline-start: 56px;
 }
-.cn-dashboard-page__header-left[data-v-347a8f78] {
+.cn-dashboard-page__header-left[data-v-0270abf8] {
 	min-width: 0;
 }
-.cn-dashboard-page__title-row[data-v-347a8f78] {
+.cn-dashboard-page__title-row[data-v-0270abf8] {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	gap: 12px;
 }
-.cn-dashboard-page__title[data-v-347a8f78] {
+.cn-dashboard-page__title[data-v-0270abf8] {
 	margin: 0;
 	font-size: 20px;
 	font-weight: 700;
 }
-.cn-dashboard-page__description[data-v-347a8f78] {
+.cn-dashboard-page__description[data-v-0270abf8] {
 	margin: 4px 0 0;
 	font-size: 14px;
 	color: var(--color-text-maxcontrast);
@@ -42733,19 +42704,19 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 
 /* 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-347a8f78] {
+.cn-dashboard-page--board .cn-dashboard-page__title[data-v-0270abf8] {
 	font-size: 28px;
 	font-weight: 700;
 	line-height: 1.2;
 }
-.cn-dashboard-page--board .cn-dashboard-page__description[data-v-347a8f78] {
+.cn-dashboard-page--board .cn-dashboard-page__description[data-v-0270abf8] {
 	margin: 6px 0 0;
 	font-size: 15px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-347a8f78] {
+.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-0270abf8] {
 	gap: 10px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-347a8f78] .button-vue {
+.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-0270abf8] .button-vue {
 	min-height: var(--cn-board-control-height, 40px);
 	height: var(--cn-board-control-height, 40px);
 }
@@ -42753,17 +42724,17 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 /* 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-347a8f78] {
+.cn-dashboard-page__switch-row[data-v-0270abf8] {
 	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-347a8f78] {
+.cn-dashboard-page__switch-row-spacer[data-v-0270abf8] {
 	flex: 1 1 auto;
 }
-.cn-dashboard-page__view-link[data-v-347a8f78] {
+.cn-dashboard-page__view-link[data-v-0270abf8] {
 	display: inline-flex;
 	align-items: center;
 	gap: 6px;
@@ -42777,37 +42748,37 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	white-space: nowrap;
 	text-decoration: none !important;
 }
-.cn-dashboard-page__view-link[data-v-347a8f78]:hover {
+.cn-dashboard-page__view-link[data-v-0270abf8]:hover {
 	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));
 }
-.cn-dashboard-page__view-link[data-v-347a8f78]:focus-visible {
+.cn-dashboard-page__view-link[data-v-0270abf8]:focus-visible {
 	outline: 2px solid var(--color-main-text);
 	outline-offset: 2px;
 }
-.cn-dashboard-page__view-link-icon[data-v-347a8f78] {
+.cn-dashboard-page__view-link-icon[data-v-0270abf8] {
 	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-347a8f78] {
+.cn-dashboard-page__date-range--segmented[data-v-0270abf8] {
 	margin-bottom: 16px;
 }
 
 /* The period group at the end of the description line. */
-.cn-dashboard-page__description--with-period[data-v-347a8f78] {
+.cn-dashboard-page__description--with-period[data-v-0270abf8] {
 	align-items: center;
 	display: flex;
 	flex-wrap: wrap;
 	gap: 8px;
 }
-.cn-dashboard-page__date-segmented[data-v-347a8f78] {
+.cn-dashboard-page__date-segmented[data-v-0270abf8] {
 	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-347a8f78] {
+.cn-dashboard-page__kpi-row[data-v-0270abf8] {
 	margin-bottom: var(--cn-board-section-gap, 16px);
 }
 
@@ -42815,15 +42786,15 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
    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-347a8f78] .cn-dashboard-grid {
+.cn-dashboard-page--board[data-v-0270abf8] .cn-dashboard-grid {
 	width: auto;
 	margin-inline: calc(-1 * var(--cn-dashboard-grid-margin, 12px));
 }
-.cn-dashboard-page__kpi-cell[data-v-347a8f78] {
+.cn-dashboard-page__kpi-cell[data-v-0270abf8] {
 	display: flex;
 	min-width: 0;
 }
-.cn-dashboard-page__kpi-cell[data-v-347a8f78] > * {
+.cn-dashboard-page__kpi-cell[data-v-0270abf8] > * {
 	flex: 1 1 auto;
 	min-width: 0;
 }
@@ -42836,7 +42807,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
    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-347a8f78] {
+.cn-dashboard-page__header-actions[data-v-0270abf8] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -42852,19 +42823,19 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 
 /* 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-347a8f78] {
+.cn-dashboard-page__date-range[data-v-0270abf8] {
 	margin-bottom: 12px;
 }
-.cn-dashboard-page__date-range--pills[data-v-347a8f78] {
+.cn-dashboard-page__date-range--pills[data-v-0270abf8] {
 	margin-bottom: 8px;
 }
-.cn-dashboard-page__date-pills[data-v-347a8f78] {
+.cn-dashboard-page__date-pills[data-v-0270abf8] {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	gap: 6px;
 }
-.cn-dashboard-page__date-pill[data-v-347a8f78] {
+.cn-dashboard-page__date-pill[data-v-0270abf8] {
 	display: inline-flex;
 	align-items: center;
 	padding: 5px 14px;
@@ -42879,77 +42850,77 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	cursor: pointer;
 	transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
 }
-.cn-dashboard-page__date-pill[data-v-347a8f78]:hover {
+.cn-dashboard-page__date-pill[data-v-0270abf8]:hover {
 	background: var(--color-background-hover);
 }
-.cn-dashboard-page__date-pill[data-v-347a8f78]:focus-visible {
+.cn-dashboard-page__date-pill[data-v-0270abf8]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
-.cn-dashboard-page__date-pill--active[data-v-347a8f78] {
+.cn-dashboard-page__date-pill--active[data-v-0270abf8] {
 	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-347a8f78]:hover {
+.cn-dashboard-page__date-pill--active[data-v-0270abf8]: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-347a8f78] {
+.cn-dashboard-page__date-pill--custom[data-v-0270abf8] {
 	border-style: dashed;
 	color: var(--color-text-maxcontrast);
 }
-.cn-dashboard-page__date-pill-custom[data-v-347a8f78] .action-item__menutoggle {
+.cn-dashboard-page__date-pill-custom[data-v-0270abf8] .action-item__menutoggle {
 	min-width: 0;
 	min-height: 0;
 	padding: 0;
 	background: transparent;
 	border: none;
 }
-.cn-dashboard-page__date-pill-custom[data-v-347a8f78] .button-vue,
-.cn-dashboard-page__date-pill-custom[data-v-347a8f78] .button-vue__wrapper,
-.cn-dashboard-page__date-pill-custom[data-v-347a8f78] .button-vue__icon {
+.cn-dashboard-page__date-pill-custom[data-v-0270abf8] .button-vue,
+.cn-dashboard-page__date-pill-custom[data-v-0270abf8] .button-vue__wrapper,
+.cn-dashboard-page__date-pill-custom[data-v-0270abf8] .button-vue__icon {
 	width: auto !important;
 	min-width: 0 !important;
 	overflow: visible !important;
 }
-.cn-dashboard-page__empty[data-v-347a8f78] {
+.cn-dashboard-page__empty[data-v-0270abf8] {
 	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-347a8f78] {
+.cn-dashboard-page__view-switch[data-v-0270abf8] {
 	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-347a8f78] {
+.cn-page-view-region--empty[data-v-0270abf8] {
 	padding: 40px 20px;
 }
-.cn-dashboard-page__page-filters[data-v-347a8f78] {
+.cn-dashboard-page__page-filters[data-v-0270abf8] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 16px;
 	align-items: flex-end;
 	margin-bottom: 12px;
 }
-.cn-dashboard-page__page-filter[data-v-347a8f78] {
+.cn-dashboard-page__page-filter[data-v-0270abf8] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 	min-width: 200px;
 }
-.cn-dashboard-page__page-filter-label[data-v-347a8f78] {
+.cn-dashboard-page__page-filter-label[data-v-0270abf8] {
 	font-size: 0.85em;
 	font-weight: 600;
 	color: var(--color-text-maxcontrast);
 }
-.cn-dashboard-page__widget-edit[data-v-347a8f78] {
+.cn-dashboard-page__widget-edit[data-v-0270abf8] {
 	position: absolute;
 	top: 4px;
 	inset-inline-end: 4px;
@@ -42968,8 +42939,8 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
    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-347a8f78] .cn-widget-wrapper__content,
-.cn-dashboard-page__card-fit.cn-widget-wrapper--flush[data-v-347a8f78] .cn-widget-wrapper__content {
+.cn-dashboard-page__card-fit[data-v-0270abf8] .cn-widget-wrapper__content,
+.cn-dashboard-page__card-fit.cn-widget-wrapper--flush[data-v-0270abf8] .cn-widget-wrapper__content {
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
@@ -42985,7 +42956,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
    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-347a8f78] .cn-widget-wrapper__content {
+.cn-dashboard-page__chart-fit[data-v-0270abf8] .cn-widget-wrapper__content {
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
@@ -42995,13 +42966,13 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 /* 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-347a8f78] .cn-stat-widget,
-.cn-dashboard-page__card-fit[data-v-347a8f78] .cn-gauge-widget,
-.cn-dashboard-page__card-fit[data-v-347a8f78] .cn-delta-widget {
+.cn-dashboard-page__card-fit[data-v-0270abf8] .cn-stat-widget,
+.cn-dashboard-page__card-fit[data-v-0270abf8] .cn-gauge-widget,
+.cn-dashboard-page__card-fit[data-v-0270abf8] .cn-delta-widget {
 	min-width: 0;
 	max-width: 100%;
 }
-.cn-dashboard-page__unknown[data-v-347a8f78] {
+.cn-dashboard-page__unknown[data-v-0270abf8] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -43012,31 +42983,31 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 }
 
 /* widget-ref content items */
-.cn-dashboard-page__content[data-v-347a8f78] {
+.cn-dashboard-page__content[data-v-0270abf8] {
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
 }
-.cn-dashboard-page__content-item[data-v-347a8f78] {
+.cn-dashboard-page__content-item[data-v-0270abf8] {
 	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-347a8f78] .cn-widget-wrapper__actions .action-item__menutoggle,
-	.cn-dashboard-page--board[data-v-347a8f78] .cn-widget-wrapper__actions .button-vue {
+.cn-dashboard-page--board[data-v-0270abf8] .cn-widget-wrapper__actions .action-item__menutoggle,
+	.cn-dashboard-page--board[data-v-0270abf8] .cn-widget-wrapper__actions .button-vue {
 		min-height: 44px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__kpi-cell[data-v-347a8f78] {
+.cn-dashboard-page--board .cn-dashboard-page__kpi-cell[data-v-0270abf8] {
 		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-347a8f78] .cn-widget-wrapper__actions .action-item__menutoggle {
+.cn-dashboard-page--board[data-v-0270abf8] .cn-widget-wrapper__actions .action-item__menutoggle {
 		min-width: 44px;
 }
-.cn-dashboard-page--board[data-v-347a8f78] .cn-widget-wrapper__actions .action-item__menutoggle .button-vue__text {
+.cn-dashboard-page--board[data-v-0270abf8] .cn-widget-wrapper__actions .action-item__menutoggle .button-vue__text {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -43048,7 +43019,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 
 /* 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-347a8f78] {
+.cn-dashboard-page__widget-count[data-v-0270abf8] {
 	align-self: center;
 	padding: 1px 8px;
 	border-radius: 10px;
@@ -43057,13 +43028,13 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	font-size: 13px;
 	font-weight: 600;
 }
-.cn-dashboard-page__widget-note[data-v-347a8f78] {
+.cn-dashboard-page__widget-note[data-v-0270abf8] {
 	align-self: center;
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 	white-space: nowrap;
 }
-.cn-dashboard-page__widget-action[data-v-347a8f78] {
+.cn-dashboard-page__widget-action[data-v-0270abf8] {
 	display: inline-flex;
 	align-items: center;
 	align-self: center;
@@ -43079,7 +43050,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	white-space: nowrap;
 	cursor: pointer;
 }
-.cn-dashboard-page__widget-action[data-v-347a8f78]:focus-visible {
+.cn-dashboard-page__widget-action[data-v-0270abf8]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
@@ -45838,51 +45809,51 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 }
 
 
-.cn-reports-page[data-v-327b60f8] {
+.cn-reports-page[data-v-6feca28f] {
 	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-327b60f8] {
+.cn-reports-page__header[data-v-6feca28f] {
 	padding-inline-start: 56px;
 }
-.cn-reports-page__title[data-v-327b60f8] {
+.cn-reports-page__title[data-v-6feca28f] {
 	margin: 0 0 4px;
 }
-.cn-reports-page__heading-row[data-v-327b60f8] {
+.cn-reports-page__heading-row[data-v-6feca28f] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-start;
 	justify-content: space-between;
 	gap: 12px 24px;
 }
-.cn-reports-page__heading-row .cn-reports-page__title[data-v-327b60f8] {
+.cn-reports-page__heading-row .cn-reports-page__title[data-v-6feca28f] {
 	flex: 1 1 320px;
 	min-width: 0;
 }
-.cn-reports-page__header-buttons[data-v-327b60f8] {
+.cn-reports-page__header-buttons[data-v-6feca28f] {
 	display: flex;
 	flex: none;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 10px;
 }
-.cn-reports-page__description[data-v-327b60f8] {
+.cn-reports-page__description[data-v-6feca28f] {
 	margin: 0 0 16px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-reports-page__filter[data-v-327b60f8] {
+.cn-reports-page__filter[data-v-6feca28f] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
 	margin-bottom: 16px;
 }
-.cn-reports-page__filter-select[data-v-327b60f8] {
+.cn-reports-page__filter-select[data-v-6feca28f] {
 	min-width: 220px;
 }
-.cn-reports-page__grid[data-v-327b60f8] {
+.cn-reports-page__grid[data-v-6feca28f] {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
 	gap: 12px;
@@ -45890,7 +45861,7 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	margin: 0;
 	padding: 0;
 }
-.cn-reports-page__card[data-v-327b60f8] {
+.cn-reports-page__card[data-v-6feca28f] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
@@ -45901,22 +45872,22 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	color: inherit;
 	text-decoration: none;
 }
-.cn-reports-page__card[data-v-327b60f8]:hover,
-.cn-reports-page__card[data-v-327b60f8]:focus {
+.cn-reports-page__card[data-v-6feca28f]:hover,
+.cn-reports-page__card[data-v-6feca28f]:focus {
 	background-color: var(--color-background-hover);
 }
-.cn-reports-page__card-title[data-v-327b60f8] {
+.cn-reports-page__card-title[data-v-6feca28f] {
 	font-weight: bold;
 }
-.cn-reports-page__card-description[data-v-327b60f8],
-.cn-reports-page__card-category[data-v-327b60f8] {
+.cn-reports-page__card-description[data-v-6feca28f],
+.cn-reports-page__card-category[data-v-6feca28f] {
 	color: var(--color-text-maxcontrast);
 	font-size: 0.9em;
 }
-.cn-reports-page__empty[data-v-327b60f8] {
+.cn-reports-page__empty[data-v-6feca28f] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-reports-page__widgets[data-v-327b60f8] {
+.cn-reports-page__widgets[data-v-6feca28f] {
 	margin-top: 20px;
 }