@conduction/nextcloud-vue 2.80.0 → 2.81.0

package/dist/nextcloud-vue.css

@@ -622,6 +622,78 @@
 .cn-look-board .cn-cell-renderer__age:not(.cn-look-nextcloud *) {
 	font-weight: 600;
 }
+
+/* ---- Record list on a dashboard card (PtDashboard) ---------------------- */
+/* The dashboard's card body is flush, so the rows carry their own inset: the
+   board's card pads 24px at the sides and each row 14px, a soft hairline
+   between rows, the title 15px weight 600 and the meta 13px muted. A row is a
+   link, but only the hover says so: no underline on any text run, however the
+   host styles its links (`!important`, because a host rule such as
+   `#content a` outranks any class). The pill and the date sit at the right. */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list {
+	padding: 0 24px 10px;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list--rows .cn-record-list__item + .cn-record-list__item {
+	border-top: 1px solid var(--color-border-dark, var(--color-border));
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row {
+	padding: 14px 0;
+	flex-wrap: wrap;
+	gap: 8px 16px;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row:hover,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row:focus-visible,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row * {
+	color: inherit;
+	text-decoration: none !important;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__title {
+	color: var(--color-main-text);
+	font-size: 15px;
+	font-weight: 600;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__meta {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__trailing {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+	font-weight: 600;
+}
+
+/* Hover: the whole row takes the hover ground, 8px beyond the text so the
+   text does not move. */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row--link {
+	margin-inline: -8px;
+	padding-inline: 8px;
+	border-radius: 8px;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row--link:hover,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row--link:focus-visible {
+	background: var(--color-background-hover);
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row--link:hover .cn-record-list__title {
+	text-decoration: none !important;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__aside {
+	margin-inline-start: auto;
+}
+
+/* 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;
+}
 /*
  * The board dialog (screens-dialog-parity, canon section 5).
  *
@@ -1530,7 +1602,8 @@
 }
 
 /* Filter: a labelled secondary button, 36px, radius 8, with the active count. */
-.cn-look-board .cn-actions-bar__filter-button.button-vue {
+.cn-look-board .cn-actions-bar__filter-button.button-vue,
+.cn-look-board .cn-actions-bar__filter-menu .button-vue {
 	min-height: 36px;
 	height: 36px;
 	border-radius: 8px;
@@ -1780,11 +1853,16 @@
 	max-width: calc(100% - 26px);
 }
 
-/* The selection column: 28px, 18px checkboxes. */
+/* The selection column: 18px checkboxes, 28px of content after 16px of padding.
+   The box model is set with `!important` and the widths include the padding:
+   Nextcloud's server.css sets `box-sizing: border-box` on everything under
+   `#content[class*="app-"]`, an id selector no class rule outranks, so a plain
+   `content-box` here was ignored and the cell left 12px for the checkbox (the
+   header's checkbox showed as a stray bracket). */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-table-col--checkbox {
-	box-sizing: content-box;
-	width: 28px;
-	min-width: 28px;
+	box-sizing: border-box !important;
+	width: 44px;
+	min-width: 44px;
 	padding-inline: 16px 0;
 	text-align: start;
 }
@@ -1832,6 +1910,29 @@
 	font-size: 13px;
 }
 
+/* An avatar in the title column (PtAccounts): a 32px chip circle, 10px before
+   the name, the e-mail under the name beside it. The name keeps the title's
+   weight and size, and its underline: an inline-flex box is atomic, so the
+   cell's own underline does not reach it. */
+.cn-look-board .cn-table-container--board .cn-data-table .cn-cell-renderer__avatar {
+	gap: 10px;
+}
+
+.cn-look-board .cn-table-container--board .cn-data-table .cn-cell-renderer__avatar-initials {
+	background: var(--color-background-dark);
+	color: var(--color-main-text);
+	font-size: 12px;
+}
+
+.cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title .cn-cell-renderer__avatar-name {
+	text-decoration: underline;
+	text-underline-offset: 2px;
+}
+
+.cn-look-board .cn-table-container--board.cn-table-container--title-plain .cn-data-table td.cn-table-col--title .cn-cell-renderer__avatar-name {
+	text-decoration: none;
+}
+
 /* A status pill: 3px 10px, radius 12, 13px weight 600. The colours stay the
    status colour map's. */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-status-badge {
@@ -1842,10 +1943,12 @@
 	line-height: 1.4;
 }
 
-/* The row menu column holds one 34px button. */
+/* The row menu column holds one 34px button between 16px of padding, so 66px
+   border to border (see the selection column for why the box model is forced). */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-table-col--actions {
-	width: 34px;
-	min-width: 0;
+	box-sizing: border-box !important;
+	width: 66px;
+	min-width: 66px;
 	padding-inline: 16px;
 	text-align: end;
 }
@@ -6196,6 +6299,15 @@ a.cn-kpi-card--board * {
 	gap: 4px;
 }
 
+/* No inner scroller: tabs that do not fit the width wrap onto a second row
+   instead of scrolling sideways (the library's default strip), so the strip
+   has no scrollbar, no clipped tab and no fade or chevron to find the rest. */
+.cn-look-board .cn-tabs--board .cn-tabs__nav {
+	flex-wrap: wrap;
+	overflow: visible;
+	row-gap: 4px;
+}
+
 .cn-look-board .cn-tabs--board .cn-tabs__nav-item {
 	background-color: var(--color-background-dark);
 	border: 1px solid var(--color-border-dark);
@@ -6341,12 +6453,28 @@ a.cn-kpi-card--board * {
 	padding: 0 0 10px;
 }
 
-.cn-look-board .cn-object-data-widget__label {
-	color: var(--color-text-maxcontrast);
+/* Outranks the component's own `.cn-object-data-widget__label[data-v-...]`
+   (weight 500, 0.85em, which has the same specificity as the look's rule and
+   wins on source order wherever a bundle, such as a companion app's, loads
+   after this stylesheet), through the grid the labels sit in. Measured live:
+   the labels read bold and dark where the boards (DqContact, PqKlant, ShKlant)
+   draw them 13px, regular weight and light grey.
+
+   The colour carries `!important`: a theme (nldesign's element overrides) sets
+   the ink of every `div` outside the header with a selector that has an id in
+   its `:not()`, which no class rule outranks. */
+.cn-look-board .cn-object-data-widget__grid .cn-object-data-widget__label {
+	color: var(--color-text-maxcontrast) !important;
 	font-size: 13px;
 	font-weight: 400;
 }
 
+/* The facts card's labels: the same light grey, regular weight. */
+.cn-look-board .cn-facts-widget .cn-facts-widget__label {
+	color: var(--color-text-maxcontrast);
+	font-weight: 400;
+}
+
 .cn-look-board .cn-object-data-widget__value {
 	font-weight: 500;
 }
@@ -6604,6 +6732,15 @@ a.cn-kpi-card--board * {
 	font-size: 13px;
 	margin: 2px 0 0;
 }
+
+/* The sidebar's own open toggle (NcAppSidebar's `.app-sidebar__toggle`, drawn
+   when the sidebar is closed) is positioned over the content's top-right
+   corner, which in this look is the header's last button: a stray square icon
+   on "More". The board draws none, so it is hidden on a detail page and the
+   header menu offers "Open sidebar" instead. */
+.cn-look-board:has(.cn-detail-page) > .app-sidebar__toggle {
+	display: none;
+}
 /* CnReferencePreview — a reference that shows what it points at. */
 
 .cn-reference-preview {
@@ -9726,11 +9863,31 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	font-weight: 700;
 	line-height: 1;
 }
+.cn-cell-renderer__avatar-text[data-v-37d7b88f] {
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+}
 .cn-cell-renderer__avatar-name[data-v-37d7b88f] {
 	min-width: 0;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
+	/* The name is the cell's text: it keeps the weight, size and colour the
+	   cell sets, as a plain value does. */
+	font: inherit;
+	color: inherit;
+}
+.cn-cell-renderer__avatar-secondary[data-v-37d7b88f] {
+	min-width: 0;
+	overflow: hidden;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+	font-weight: 400;
+	line-height: 1.35;
+	text-overflow: ellipsis;
+	text-decoration: none;
+	white-space: nowrap;
 }
 
 /* A date that matched a rule is also set in a heavier weight, so the signal
@@ -15273,6 +15430,70 @@ button.cn-files-card__open[data-v-46f7e3c9]:hover {
 	white-space: nowrap;
 	color: var(--color-text-maxcontrast);
 }
+.cn-files-browser__col-select[data-v-f5bdd9e2] {
+	width: 36px;
+	text-align: center;
+}
+.cn-files-browser__select[data-v-f5bdd9e2] {
+	width: 18px;
+	height: 18px;
+	margin: 0;
+	accent-color: var(--color-primary-element);
+}
+.cn-files-browser__bulk-bar[data-v-f5bdd9e2] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 12px;
+	border-radius: var(--border-radius-large);
+	background: var(--color-primary-element-light);
+}
+.cn-files-browser__bulk-count[data-v-f5bdd9e2] {
+	font-weight: 600;
+	margin-inline-end: 8px;
+}
+.cn-files-browser__facets[data-v-f5bdd9e2] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px 16px;
+}
+.cn-files-browser__facet[data-v-f5bdd9e2] {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+}
+.cn-files-browser__facet-chip[data-v-f5bdd9e2] {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	min-height: 32px;
+	padding: 0 12px;
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--border-radius-pill);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	cursor: pointer;
+}
+.cn-files-browser__facet-chip--active[data-v-f5bdd9e2] {
+	border-color: var(--color-primary-element);
+	background: var(--color-primary-element-light);
+}
+.cn-files-browser__group-heading[data-v-f5bdd9e2] {
+	padding: 12px 8px 4px;
+	text-align: start;
+	font-weight: 700;
+}
+.cn-files-browser__group-count[data-v-f5bdd9e2] {
+	margin-inline-start: 6px;
+	font-weight: 400;
+	color: var(--color-text-maxcontrast);
+}
+.cn-files-browser__no-match[data-v-f5bdd9e2] {
+	padding: 16px 8px;
+	color: var(--color-text-maxcontrast);
+}
 .cn-files-browser__col-actions[data-v-f5bdd9e2] {
 	width: 48px;
 }
@@ -21928,6 +22149,59 @@ a.cn-kpi-card--board * {
 	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-4f8583ef] {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	box-sizing: border-box;
+	padding: 20px 22px;
+}
+.cn-stats-block-widget__rows-title[data-v-4f8583ef] {
+	margin: 0;
+	font-size: 15px;
+	font-weight: 600;
+	color: var(--color-text-maxcontrast);
+}
+.cn-stats-block-widget__rows[data-v-4f8583ef] {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	margin: 0;
+	font-size: 14px;
+}
+.cn-stats-block-widget__row[data-v-4f8583ef] {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: 16px;
+}
+.cn-stats-block-widget__row-label[data-v-4f8583ef] {
+	min-width: 0;
+	margin: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.cn-stats-block-widget__row-value[data-v-4f8583ef] {
+	flex: none;
+	margin: 0;
+	font-size: 17px;
+	font-weight: 700;
+	text-align: right;
+}
+.cn-stats-block-widget__row-value--success[data-v-4f8583ef] {
+	color: var(--color-text-success, var(--color-success-text));
+}
+.cn-stats-block-widget__row-value--warning[data-v-4f8583ef] {
+	color: var(--color-text-warning, var(--color-warning-text));
+}
+.cn-stats-block-widget__row-value--error[data-v-4f8583ef] {
+	color: var(--color-text-error, var(--color-error-text));
+}
+.cn-stats-block-widget__row-value--primary[data-v-4f8583ef] {
+	color: var(--color-primary-element);
+}
+
 
 .cn-stats-block-form[data-v-20f3b26f] {
 	display: flex;
@@ -22446,6 +22720,20 @@ to { background-position: -200% 0;
 .cn-banner-widget__card[data-v-3531692f] {
 	margin: 0;
 }
+.cn-banner-widget__line[data-v-3531692f] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	gap: 4px 20px;
+}
+.cn-banner-widget__lead[data-v-3531692f] {
+	font-weight: 700;
+}
+.cn-banner-widget__link[data-v-3531692f] {
+	margin-inline-start: auto;
+	font-size: 14px;
+	font-weight: 600;
+}
 .cn-banner-widget__text--clickable[data-v-3531692f] {
 	cursor: pointer;
 	text-decoration: underline;
@@ -22529,6 +22817,28 @@ to { background-position: -200% 0;
 	margin: 0;
 	color: var(--color-text-maxcontrast);
 }
+
+/* Stacked (PqMijnWerk "Begin hier"): the text, then the action under it. */
+.cn-banner-widget--stacked[data-v-3531692f] {
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 10px;
+}
+.cn-banner-widget--stacked .cn-banner-widget__body[data-v-3531692f] {
+	flex: 0 0 auto;
+	gap: 10px;
+}
+.cn-banner-widget--stacked .cn-banner-widget__title[data-v-3531692f] {
+	font-size: 16px;
+	line-height: 1.4;
+}
+.cn-banner-widget--stacked .cn-banner-widget__reason[data-v-3531692f] {
+	font-size: 14px;
+}
+.cn-banner-widget--stacked .cn-banner-widget__action[data-v-3531692f] {
+	min-height: var(--cn-board-control-height, 40px);
+	font-size: 14px;
+}
 .cn-banner-widget__actions[data-v-3531692f] {
 	display: flex;
 	flex-wrap: wrap;
@@ -22700,6 +23010,18 @@ to { background-position: -200% 0;
 	box-shadow: 0 1px 2px var(--color-box-shadow);
 }
 
+/* On a phone (screens-dashboard-phone) the compact group's segments are 44px
+   high touch targets, and the group wraps onto a second row instead of
+   running off the screen. */
+@media (max-width: 640px) {
+.cn-segmented-control.cn-segmented-control--compact[data-v-7b344b4f] {
+		flex-wrap: wrap;
+}
+.cn-segmented-control.cn-segmented-control--compact .cn-segmented-control__option[data-v-7b344b4f] {
+		min-height: 44px;
+}
+}
+
 
 .cn-header-widget[data-v-1b97430f] {
 	width: 100%;
@@ -23524,6 +23846,13 @@ button.cn-stepper__step[data-v-19697746] {
 }
 
 
+.cn-form-page__honeypot {
+	position: absolute;
+	left: -10000px;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+}
 .cn-form-page {
 	display: flex;
 	flex-direction: column;
@@ -23977,6 +24306,26 @@ button.cn-stepper__step[data-v-19697746] {
 	gap: 20px;
 }
 
+/* A gridded stack (`columns` / `layout` on the tab): 12 columns, widgets wrap
+   onto the next row, a row's cards as tall as the tallest. Narrow, it is the
+   plain stack again. */
+.cn-tabs-widget__stack--grid[data-v-1dbd6122] {
+	display: grid;
+	grid-template-columns: repeat(12, minmax(0, 1fr));
+	align-items: stretch;
+}
+.cn-tabs-widget__stack--grid[data-v-1dbd6122] > * {
+	min-width: 0;
+}
+@media (max-width: 700px) {
+.cn-tabs-widget__stack--grid[data-v-1dbd6122] {
+		grid-template-columns: minmax(0, 1fr);
+}
+.cn-tabs-widget__stack--grid[data-v-1dbd6122] > * {
+		grid-column: auto !important;
+}
+}
+
 /* The panel is the card; the strip is not inside it. There is no title bar
    above the tabs either: the open tab names the panel, so a title row would
    say the same thing twice and cost a row of height on a card that is mostly
@@ -24093,6 +24442,14 @@ button.cn-stepper__step[data-v-19697746] {
 .cn-tabs-widget__tabs[data-v-1dbd6122] .cn-tab {
 	height: 100%;
 }
+
+/* A list widget's footer Add bleeds through its card's 16px content padding
+   (margin 0 -16px -16px). The panel of a tab pads 12px, so on a tab that
+   holds the list directly the footer stuck out 4px on the right and at the
+   bottom and made the panel scroll. It bleeds exactly the panel's padding. */
+.cn-tabs-widget__tabs[data-v-1dbd6122] .cn-tabs__content > .cn-tab > .cn-detail-widget-host--bare .cn-object-list-widget__add {
+	margin: auto -12px -12px;
+}
 .cn-tabs-widget__title[data-v-1dbd6122] {
 	align-items: center;
 	display: inline-flex;
@@ -28048,6 +28405,50 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-75628
 	font-variant-numeric: tabular-nums;
 }
 
+/* List variant, after the dashboard board's My tasks card: a checkbox, the
+   title, the subject on a muted second line and the due date at its right. */
+.cn-tasks-widget--list .cn-tasks-widget__row[data-v-ff399342] {
+	align-items: flex-start;
+	gap: 12px;
+	padding: 12px 0;
+}
+.cn-tasks-widget--list .cn-tasks-widget__name[data-v-ff399342] {
+	font-weight: 400;
+	font-size: 15px;
+	line-height: 1.35;
+	color: var(--color-main-text);
+}
+.cn-tasks-widget__check[data-v-ff399342],
+.cn-tasks-widget__check-spacer[data-v-ff399342] {
+	flex: none;
+	width: 20px;
+	height: 20px;
+	margin: 1px 0 0;
+}
+.cn-tasks-widget__check[data-v-ff399342] {
+	accent-color: var(--color-primary-element);
+	cursor: pointer;
+}
+.cn-tasks-widget__meta--split[data-v-ff399342] {
+	display: flex;
+	justify-content: space-between;
+	gap: 8px;
+	font-size: 13px;
+	overflow: visible;
+}
+.cn-tasks-widget__subject[data-v-ff399342] {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.cn-tasks-widget--list .cn-tasks-widget__due[data-v-ff399342] {
+	font-size: 13px;
+	font-weight: 500;
+}
+.cn-tasks-widget--list .cn-tasks-widget__due--overdue[data-v-ff399342] {
+	font-weight: 600;
+}
+
 /* Overdue: weight AND colour on top of the wording, which already says
    "Overdue by N days" — the signal survives monochrome. */
 .cn-tasks-widget__due--overdue[data-v-ff399342] {
@@ -28146,11 +28547,21 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-75628
 .cn-facts-widget__row[data-v-2ca63011] {
 	display: contents;
 }
-.cn-facts-widget__label[data-v-2ca63011] {
+
+/* Nextcloud core styles `dt` and `dd` (text-align end, 12px padding), which
+   pushed the label to the right of its column and added 12px around both. The
+   class is doubled so these resets outrank that rule, and a dossiq-style
+   `:deep()` override in an app is not needed. */
+.cn-facts-widget__label.cn-facts-widget__label[data-v-2ca63011] {
+	margin: 0;
+	padding: 0;
+	text-align: start;
 	color: var(--color-text-maxcontrast);
 }
-.cn-facts-widget__value[data-v-2ca63011] {
+.cn-facts-widget__value.cn-facts-widget__value[data-v-2ca63011] {
 	margin: 0;
+	padding: 0;
+	text-align: start;
 	font-weight: 500;
 	min-width: 0;
 	overflow-wrap: anywhere;
@@ -28370,6 +28781,496 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-75628
 .cn-field-list-widget__add > button[data-v-0f29a833] {
 	flex: 0 0 auto;
 }
+.cn-field-list-widget__toolbar[data-v-0f29a833] {
+	display: flex;
+	justify-content: flex-end;
+}
+.cn-field-list-widget__table-wrap[data-v-0f29a833] {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	overflow-x: auto;
+}
+.cn-field-list-widget__table[data-v-0f29a833] {
+	width: 100%;
+	border-collapse: collapse;
+}
+.cn-field-list-widget__th[data-v-0f29a833] {
+	padding: 8px 12px;
+	text-align: start;
+	font-size: 13px;
+	font-weight: 600;
+	white-space: nowrap;
+	color: var(--color-text-maxcontrast);
+	background: var(--color-background-hover);
+}
+.cn-field-list-widget__th--menu[data-v-0f29a833],
+.cn-field-list-widget__td--menu[data-v-0f29a833] {
+	width: 1%;
+	text-align: end;
+}
+.cn-field-list-widget__tr[data-v-0f29a833] {
+	border-top: 1px solid var(--cn-board-hairline, var(--color-border));
+}
+.cn-field-list-widget__td[data-v-0f29a833] {
+	padding: 10px 12px;
+	vertical-align: middle;
+	overflow-wrap: anywhere;
+}
+.cn-field-list-widget__sr[data-v-0f29a833] {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip-path: inset(50%);
+}
+.cn-field-list-widget__band[data-v-0f29a833] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px 12px;
+	padding: 12px 14px;
+	border: 1px solid var(--color-warning);
+	border-radius: 10px;
+	background: color-mix(in srgb, var(--color-warning) 14%, var(--color-main-background));
+	font-size: 14px;
+}
+
+
+.cn-settings-form[data-v-731c450f] {
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+	min-width: 0;
+}
+.cn-settings-form__grid[data-v-731c450f] {
+	display: grid;
+	gap: 14px 16px;
+	grid-template-columns: minmax(0, 1fr);
+}
+.cn-settings-form__grid--2[data-v-731c450f] {
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.cn-settings-form__field[data-v-731c450f] {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	min-width: 0;
+}
+.cn-settings-form__field--wide[data-v-731c450f] {
+	grid-column: 1 / -1;
+}
+.cn-settings-form__label[data-v-731c450f] {
+	font-size: 13px;
+	font-weight: 600;
+	color: var(--color-main-text);
+}
+.cn-settings-form__control[data-v-731c450f] {
+	width: 100%;
+	box-sizing: border-box;
+	height: var(--cn-board-control-height, 40px);
+	padding: 0 12px;
+	border: 1px solid var(--color-border-maxcontrast);
+	border-radius: var(--cn-board-control-radius, 8px);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	font: inherit;
+}
+.cn-settings-form__file[data-v-731c450f] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+}
+.cn-settings-form__control--file[data-v-731c450f] {
+	display: inline-flex;
+	align-items: center;
+	width: auto;
+	min-width: 120px;
+	flex: 0 1 auto;
+	overflow-wrap: anywhere;
+}
+.cn-settings-form__control--placeholder[data-v-731c450f] {
+	color: var(--color-text-maxcontrast);
+}
+.cn-settings-form__control--area[data-v-731c450f] {
+	height: auto;
+	padding: 10px 12px;
+	resize: vertical;
+}
+.cn-settings-form__control[data-v-731c450f]:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 1px;
+}
+.cn-settings-form__hint[data-v-731c450f],
+.cn-settings-form__error[data-v-731c450f] {
+	margin: 0;
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-settings-form__error[data-v-731c450f] {
+	color: var(--color-error-text);
+}
+.cn-settings-form__actions[data-v-731c450f] {
+	display: flex;
+	justify-content: flex-start;
+}
+@media (max-width: 640px) {
+.cn-settings-form__grid--2[data-v-731c450f] {
+		grid-template-columns: minmax(0, 1fr);
+}
+}
+
+
+.cn-switch-rows[data-v-9dd5b4e2] {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	min-width: 0;
+}
+.cn-switch-rows__list[data-v-9dd5b4e2] {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+}
+.cn-switch-rows__row[data-v-9dd5b4e2] {
+	padding: 10px 0;
+	border-top: 1px solid var(--cn-board-hairline, var(--color-border));
+}
+.cn-switch-rows__row[data-v-9dd5b4e2]:first-child {
+	border-top: none;
+	padding-top: 0;
+}
+.cn-switch-rows__label[data-v-9dd5b4e2] {
+	display: block;
+	font-weight: 600;
+}
+.cn-switch-rows__hint[data-v-9dd5b4e2] {
+	display: block;
+	font-size: 12px;
+	font-weight: 400;
+	color: var(--color-text-maxcontrast);
+}
+
+
+.cn-radio-cards[data-v-8aefa4a2] {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	min-width: 0;
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+.cn-radio-cards__legend[data-v-8aefa4a2] {
+	padding: 0;
+	margin-bottom: 6px;
+	font-weight: 600;
+}
+.cn-radio-cards__grid[data-v-8aefa4a2] {
+	display: grid;
+	gap: 10px;
+	grid-template-columns: minmax(0, 1fr);
+}
+.cn-radio-cards__grid--2[data-v-8aefa4a2] {
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.cn-radio-cards__grid--3[data-v-8aefa4a2] {
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.cn-radio-cards__card[data-v-8aefa4a2] {
+	position: relative;
+	display: flex;
+	align-items: flex-start;
+	gap: 10px;
+	padding: 12px 14px;
+	border: 1px solid var(--color-border-maxcontrast);
+	border-radius: var(--cn-board-control-radius, 8px);
+	background: var(--color-main-background);
+	cursor: pointer;
+}
+.cn-radio-cards__card--selected[data-v-8aefa4a2] {
+	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-8aefa4a2]: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-8aefa4a2] {
+	position: absolute;
+	opacity: 0;
+	inset: 0;
+	margin: 0;
+	cursor: pointer;
+}
+.cn-radio-cards__dot[data-v-8aefa4a2] {
+	flex: 0 0 auto;
+	width: 14px;
+	height: 14px;
+	margin-top: 3px;
+	box-sizing: border-box;
+	border: 1px solid var(--color-border-maxcontrast);
+	border-radius: 50%;
+	background: var(--color-main-background);
+}
+.cn-radio-cards__card--selected .cn-radio-cards__dot[data-v-8aefa4a2] {
+	border: 4px solid var(--color-primary-element);
+}
+.cn-radio-cards__text[data-v-8aefa4a2] {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+.cn-radio-cards__title[data-v-8aefa4a2] {
+	font-weight: 600;
+}
+.cn-radio-cards__description[data-v-8aefa4a2] {
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+}
+@media (max-width: 640px) {
+.cn-radio-cards__grid--2[data-v-8aefa4a2],
+	.cn-radio-cards__grid--3[data-v-8aefa4a2] {
+		grid-template-columns: minmax(0, 1fr);
+}
+}
+
+
+.cn-chips-field[data-v-43e5bfcf] {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	min-width: 0;
+}
+.cn-chips-field__label[data-v-43e5bfcf] {
+	margin: 0;
+	font-size: 13px;
+	font-weight: 600;
+}
+.cn-chips-field__chips[data-v-43e5bfcf] {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+}
+.cn-chips-field__chip[data-v-43e5bfcf] {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 6px 4px 12px;
+	border-radius: 999px;
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text, var(--color-main-text));
+	font-weight: 600;
+	overflow-wrap: anywhere;
+}
+.cn-chips-field__remove[data-v-43e5bfcf] {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 20px;
+	height: 20px;
+	padding: 0;
+	border: 0;
+	border-radius: 50%;
+	background: transparent;
+	color: inherit;
+	font-size: 16px;
+	line-height: 1;
+	cursor: pointer;
+}
+.cn-chips-field__remove[data-v-43e5bfcf]:hover:not(:disabled),
+.cn-chips-field__remove[data-v-43e5bfcf]:focus-visible {
+	background: var(--color-primary-element-light-hover, var(--color-background-hover));
+}
+.cn-chips-field__add[data-v-43e5bfcf] {
+	padding: 4px 12px;
+	border: 1px dashed var(--color-border-maxcontrast);
+	border-radius: 999px;
+	background: transparent;
+	color: var(--color-main-text);
+	font-weight: 600;
+	cursor: pointer;
+}
+.cn-chips-field__add[data-v-43e5bfcf]:hover:not(:disabled) {
+	background: var(--color-background-hover);
+}
+.cn-chips-field__form[data-v-43e5bfcf] {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+.cn-chips-field__input[data-v-43e5bfcf] {
+	height: var(--cn-board-control-height, 40px);
+	box-sizing: border-box;
+	padding: 0 12px;
+	border: 1px solid var(--color-border-maxcontrast);
+	border-radius: var(--cn-board-control-radius, 8px);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	font: inherit;
+}
+.cn-chips-field__hint[data-v-43e5bfcf],
+.cn-chips-field__error[data-v-43e5bfcf] {
+	margin: 0;
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-chips-field__error[data-v-43e5bfcf] {
+	color: var(--color-error-text);
+}
+
+
+.cn-toggle-table[data-v-53a57112] {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	min-width: 0;
+}
+.cn-toggle-table__table[data-v-53a57112] {
+	width: 100%;
+	border-collapse: collapse;
+}
+.cn-toggle-table__head[data-v-53a57112] {
+	padding: 8px 12px;
+	text-align: start;
+	font-size: 13px;
+	font-weight: 600;
+	color: var(--color-text-maxcontrast);
+	background: var(--color-background-hover);
+}
+.cn-toggle-table__head--toggle[data-v-53a57112],
+.cn-toggle-table__cell--toggle[data-v-53a57112] {
+	width: 1%;
+	white-space: nowrap;
+	text-align: end;
+}
+.cn-toggle-table__row[data-v-53a57112] {
+	border-top: 1px solid var(--cn-board-hairline, var(--color-border));
+}
+.cn-toggle-table__cell[data-v-53a57112] {
+	padding: 10px 12px;
+	vertical-align: middle;
+	overflow-wrap: anywhere;
+}
+.cn-toggle-table__title[data-v-53a57112] {
+	display: block;
+	font-weight: 600;
+}
+.cn-toggle-table__hint[data-v-53a57112] {
+	display: block;
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-toggle-table__empty[data-v-53a57112] {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+}
+
+
+.cn-choice-picker[data-v-7075cbe2] {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	min-width: 0;
+}
+.cn-choice-picker__cards[data-v-7075cbe2] {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+.cn-choice-picker__legend[data-v-7075cbe2] {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip-path: inset(50%);
+}
+.cn-choice-picker__card[data-v-7075cbe2] {
+	position: relative;
+	display: flex;
+	flex: 1 1 220px;
+	align-items: center;
+	gap: 12px;
+	padding: 10px 12px;
+	border: 1px solid var(--cn-board-hairline, var(--color-border));
+	border-radius: 10px;
+	background: var(--color-main-background);
+	cursor: pointer;
+}
+.cn-choice-picker__card--selected[data-v-7075cbe2] {
+	padding: 9px 11px;
+	border: 2px solid var(--color-primary-element);
+}
+.cn-choice-picker__card--refused[data-v-7075cbe2] {
+	cursor: not-allowed;
+	opacity: 0.7;
+}
+.cn-choice-picker__card[data-v-7075cbe2]:focus-within {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+}
+.cn-choice-picker__input[data-v-7075cbe2] {
+	flex: 0 0 auto;
+	width: 18px;
+	height: 18px;
+	margin: 0;
+	accent-color: var(--color-primary-element);
+}
+.cn-choice-picker__swatches[data-v-7075cbe2] {
+	display: flex;
+	gap: 4px;
+}
+.cn-choice-picker__swatch[data-v-7075cbe2] {
+	width: 18px;
+	height: 18px;
+	box-sizing: border-box;
+	border: 1px solid var(--color-border);
+	border-radius: 4px;
+}
+.cn-choice-picker__text[data-v-7075cbe2] {
+	display: flex;
+	flex: 1 1 auto;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+.cn-choice-picker__title[data-v-7075cbe2] {
+	font-size: 15px;
+}
+.cn-choice-picker__refusal[data-v-7075cbe2],
+.cn-choice-picker__hint[data-v-7075cbe2],
+.cn-choice-picker__note[data-v-7075cbe2] {
+	margin: 0;
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-choice-picker__warning-intro[data-v-7075cbe2] {
+	margin: 0 0 4px;
+}
+.cn-choice-picker__warning-list[data-v-7075cbe2] {
+	margin: 0;
+	padding-inline-start: 18px;
+}
+.cn-choice-picker__actions[data-v-7075cbe2] {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
 
 
 .cn-record-list__list[data-v-7073b362] {
@@ -28404,6 +29305,19 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-75628
 .cn-record-list__row--link:focus-visible .cn-record-list__title[data-v-7073b362] {
 	text-decoration: underline;
 }
+.cn-record-list__avatar[data-v-7073b362] {
+	align-items: center;
+	background: var(--color-background-hover);
+	border-radius: 50%;
+	color: var(--color-main-text);
+	display: flex;
+	flex: none;
+	font-size: 12px;
+	font-weight: 700;
+	height: 36px;
+	justify-content: center;
+	width: 36px;
+}
 .cn-record-list__main[data-v-7073b362] {
 	display: flex;
 	flex: 1 1 auto;
@@ -28493,6 +29407,53 @@ a.cn-record-list__inline-title[data-v-7073b362] {
 	display: none;
 }
 
+/* A row is a touch target of at least 44px on a phone. */
+@media (max-width: 640px) {
+.cn-record-list__row {
+		min-height: 44px;
+}
+}
+
+
+.cn-saved-views-widget__list[data-v-8ca66162] {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+.cn-saved-views-widget__link[data-v-8ca66162] {
+	color: var(--color-primary-element);
+	display: inline-block;
+	font-size: 14px;
+	font-weight: 600;
+	min-height: 24px;
+	text-decoration: none;
+}
+.cn-saved-views-widget__link[data-v-8ca66162]:hover,
+.cn-saved-views-widget__link[data-v-8ca66162]:focus-visible {
+	text-decoration: underline;
+}
+.cn-saved-views-widget__note[data-v-8ca66162] {
+	color: var(--color-text-maxcontrast);
+	margin: 0;
+}
+.cn-saved-views-widget__loading[data-v-8ca66162] {
+	display: flex;
+	justify-content: center;
+	padding: 8px 0;
+}
+
+/* A phone: each link is a 44px touch target. */
+@media (max-width: 640px) {
+.cn-saved-views-widget__link[data-v-8ca66162] {
+		align-items: center;
+		display: inline-flex;
+		min-height: 44px;
+}
+}
+
 
 .cn-notepad-widget-form[data-v-c752df66] {
 	display: flex;
@@ -28805,6 +29766,42 @@ a.cn-record-list__inline-title[data-v-7073b362] {
 	gap: 2px;
 }
 
+/* The chips: the compact segmented group, left, in the card the grid draws. */
+.cn-workspace-filter-widget--chips[data-v-f0d5c1c6] {
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+}
+
+/* A bar: its controls in one row, an `align: "end"` control pushed right. */
+.cn-workspace-filter-widget--bar[data-v-f0d5c1c6] {
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 12px 16px;
+}
+
+/* An inline control sits in a bar: label left of the control, width to its content. */
+.cn-workspace-filter-widget--inline[data-v-f0d5c1c6] {
+	flex-direction: row;
+	align-items: center;
+	gap: 8px;
+	width: auto;
+}
+.cn-workspace-filter-widget--inline .cn-workspace-filter-widget__label[data-v-f0d5c1c6] {
+	font-weight: 400;
+	color: var(--color-text-maxcontrast);
+}
+.cn-workspace-filter-widget--end[data-v-f0d5c1c6] {
+	margin-inline-start: auto;
+}
+.cn-workspace-filter-widget--end ~ .cn-workspace-filter-widget--end[data-v-f0d5c1c6] {
+	margin-inline-start: 0;
+}
+.cn-workspace-filter-widget__toggle[data-v-f0d5c1c6] {
+	font-weight: 600;
+}
+
 /* The start card: text left, control (and link) right, as PqDashboard's "Contact starten". */
 .cn-workspace-filter-widget--start[data-v-f0d5c1c6] {
 	flex-direction: row;
@@ -28847,6 +29844,27 @@ a.cn-record-list__inline-title[data-v-7073b362] {
 	font-size: 0.85em;
 }
 
+/* On a phone the bar's controls take a row each (the chips already wrap), and
+   a switch and a select are 44px touch targets. */
+@media (max-width: 640px) {
+.cn-workspace-filter-widget--bar > .cn-workspace-filter-widget--inline[data-v-f0d5c1c6] {
+		flex: 1 1 100%;
+}
+.cn-workspace-filter-widget--bar > .cn-workspace-filter-widget--end[data-v-f0d5c1c6] {
+		margin-inline-start: 0;
+}
+.cn-workspace-filter-widget--inline .cn-workspace-filter-widget__toggle[data-v-f0d5c1c6] {
+		min-height: 44px;
+}
+.cn-workspace-filter-widget--inline[data-v-f0d5c1c6] .v-select {
+		flex: 1 1 auto;
+		min-width: 0;
+}
+.cn-workspace-filter-widget--inline[data-v-f0d5c1c6] .vs__dropdown-toggle {
+		min-height: 44px;
+}
+}
+
 
 .cn-data-matrix[data-v-6e3e1a0f] {
 	display: flex;
@@ -36476,6 +37494,17 @@ button.cn-object-calendar__overflow[data-v-bea31862] {
 .cn-dashboard-page__content-item[data-v-824052fe] {
 	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-824052fe] .cn-widget-wrapper__actions .action-item__menutoggle,
+	.cn-dashboard-page--board[data-v-824052fe] .cn-widget-wrapper__actions .button-vue {
+		min-height: 44px;
+}
+.cn-dashboard-page--board .cn-dashboard-page__kpi-cell[data-v-824052fe] {
+		min-height: 44px;
+}
+}
 
 
 /* Trigger: strip NcActions' default button chrome down to just the chip span. */