@conduction/nextcloud-vue 2.58.0 → 2.60.0

package/dist/esm/nextcloud-vue.css

@@ -364,6 +364,32 @@
 	background-color: var(--color-primary-light);
 }
 
+/* A row with a route is a real link (see CnDataTable's row link): the anchor
+   in its first cell is stretched over the whole row. The row's own controls
+   sit above it so they stay usable; keep the list in step with NESTED_CONTROL
+   in utils/rowAuxClick.js. */
+.cn-table-row--linked {
+	position: relative;
+}
+
+.cn-table-row__link {
+	position: absolute;
+	inset: 0;
+	cursor: pointer;
+}
+
+.cn-table-row__link:focus-visible {
+	outline: 2px solid var(--color-main-text);
+	outline-offset: -2px;
+}
+
+.cn-table-row--linked .cn-table-col--checkbox,
+.cn-table-row--linked .cn-table-col--actions,
+.cn-table-row--linked td :is(a, button, input, select, textarea, label, summary, [role='button'], [role='checkbox'], [role='link'], [contenteditable='true']):not(.cn-table-row__link) {
+	position: relative;
+	z-index: 1;
+}
+
 /* Column Types */
 .cn-table-col--checkbox {
 	width: 50px;
@@ -2903,6 +2929,53 @@
 	}
 }
 
+/* The action model and case surfaces (detail-action-model-and-case-surfaces) */
+
+/* Type and status pills above the title. */
+.cn-detail-page__pills {
+	align-items: center;
+	display: flex;
+	flex-wrap: wrap;
+	gap: calc(2 * var(--default-grid-baseline));
+	margin-bottom: calc(1.5 * var(--default-grid-baseline));
+}
+
+.cn-detail-page__next-step {
+	margin-bottom: calc(5 * var(--default-grid-baseline));
+}
+
+/* Side column. The page becomes a wrapping flex row in which every child
+   takes a full line, except the body and the side column: those two share a
+   line while there is room for both (520px + 300px) and the column drops
+   under the body when there is not. No breakpoint, so it also holds inside a
+   split pane or beside an open sidebar, where the viewport says nothing about
+   the room the page has. Pages without a side column never get this class. */
+.cn-detail-page--with-side {
+	align-items: flex-start;
+	column-gap: calc(5 * var(--default-grid-baseline));
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.cn-detail-page--with-side > * {
+	flex: 1 1 100%;
+	min-width: 0;
+}
+
+.cn-detail-page--with-side > .cn-detail-page__body {
+	flex: 999 1 520px;
+}
+
+.cn-detail-page--with-side > .cn-detail-page__side {
+	flex: 1 1 300px;
+}
+
+.cn-detail-page__side {
+	display: flex;
+	flex-direction: column;
+	gap: calc(5 * var(--default-grid-baseline));
+}
+
 /* The record as a place (case-page-and-list-as-a-place) */
 
 /* A skip link that reaches the page's declared primary action. Off screen
@@ -4737,6 +4810,113 @@
 }
 
 
+.cn-conversation-thread[data-v-22b6724f] {
+	display: flex;
+	flex-direction: column;
+	gap: calc(3.5 * var(--default-grid-baseline));
+}
+.cn-conversation-thread__title[data-v-22b6724f] {
+	font-size: 1.1em;
+	font-weight: 700;
+	margin: 0;
+}
+.cn-conversation-thread__empty[data-v-22b6724f] {
+	color: var(--color-text-maxcontrast);
+	margin: 0;
+}
+.cn-conversation-thread__messages[data-v-22b6724f] {
+	display: flex;
+	flex-direction: column;
+	gap: calc(3.5 * var(--default-grid-baseline));
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+.cn-conversation-thread__message[data-v-22b6724f] {
+	display: flex;
+	gap: calc(3 * var(--default-grid-baseline));
+}
+.cn-conversation-thread__message--us[data-v-22b6724f] {
+	flex-direction: row-reverse;
+}
+.cn-conversation-thread__avatar[data-v-22b6724f] {
+	align-items: center;
+	background: var(--color-background-dark);
+	border-radius: 50%;
+	color: var(--color-main-text);
+	display: flex;
+	flex: none;
+	font-size: 0.8em;
+	font-weight: 700;
+	height: 34px;
+	justify-content: center;
+	width: 34px;
+}
+.cn-conversation-thread__bubble[data-v-22b6724f] {
+	background: var(--color-background-hover);
+	border-radius: var(--border-radius-large);
+	border-start-start-radius: var(--border-radius-small, 4px);
+	color: var(--color-main-text);
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	gap: var(--default-grid-baseline);
+	min-width: 0;
+	padding: calc(3 * var(--default-grid-baseline)) calc(3.5 * var(--default-grid-baseline));
+}
+.cn-conversation-thread__message--us .cn-conversation-thread__bubble[data-v-22b6724f] {
+	background: var(--color-primary-element-light);
+	border-start-end-radius: var(--border-radius-small, 4px);
+	border-start-start-radius: var(--border-radius-large);
+	color: var(--color-primary-element-light-text);
+}
+.cn-conversation-thread__meta[data-v-22b6724f] {
+	display: flex;
+	flex-wrap: wrap;
+	font-size: 0.9em;
+	gap: calc(2 * var(--default-grid-baseline));
+}
+.cn-conversation-thread__author[data-v-22b6724f] {
+	font-weight: 600;
+}
+.cn-conversation-thread__text[data-v-22b6724f] {
+	overflow-wrap: anywhere;
+	white-space: pre-wrap;
+}
+.cn-conversation-thread__reply[data-v-22b6724f] {
+	display: flex;
+	flex-direction: column;
+	gap: calc(2 * var(--default-grid-baseline));
+}
+.cn-conversation-thread__reply-label[data-v-22b6724f] {
+	font-weight: 600;
+}
+.cn-conversation-thread__input[data-v-22b6724f] {
+	box-sizing: border-box;
+	margin: 0;
+	resize: vertical;
+	width: 100%;
+}
+.cn-conversation-thread__error[data-v-22b6724f] {
+	color: var(--color-error-text, var(--color-error));
+	margin: 0;
+}
+.cn-conversation-thread__reply-actions[data-v-22b6724f] {
+	display: flex;
+	flex-wrap: wrap;
+	gap: calc(2.5 * var(--default-grid-baseline));
+	justify-content: flex-end;
+}
+
+
+.cn-case-widget-card[data-v-57081189] {
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large);
+	padding: calc(5 * var(--default-grid-baseline));
+}
+
+
 /* Match vue-material-design-icons: inline path icons inherit text colour. */
 .cn-widget-icon__path[data-v-6082e422] {
 	fill: currentColor;
@@ -4766,6 +4946,79 @@
 	margin: 0;
 }
 
+
+.cn-document-review-list[data-v-9a0e5e62] {
+	display: flex;
+	flex-direction: column;
+	gap: calc(1.5 * var(--default-grid-baseline));
+}
+.cn-document-review-list__header[data-v-9a0e5e62] {
+	align-items: center;
+	display: flex;
+	flex-wrap: wrap;
+	gap: calc(2 * var(--default-grid-baseline));
+	justify-content: space-between;
+	margin-bottom: calc(2 * var(--default-grid-baseline));
+}
+.cn-document-review-list__title[data-v-9a0e5e62] {
+	font-size: 1.1em;
+	font-weight: 700;
+	margin: 0;
+}
+.cn-document-review-list__summary[data-v-9a0e5e62],
+.cn-document-review-list__meta[data-v-9a0e5e62],
+.cn-document-review-list__empty[data-v-9a0e5e62] {
+	color: var(--color-text-maxcontrast);
+}
+.cn-document-review-list__empty[data-v-9a0e5e62] {
+	margin: 0;
+}
+.cn-document-review-list__rows[data-v-9a0e5e62] {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+.cn-document-review-list__row[data-v-9a0e5e62] {
+	align-items: center;
+	border-top: 1px solid var(--color-border);
+	display: flex;
+	flex-wrap: wrap;
+	gap: calc(3 * var(--default-grid-baseline));
+	padding: calc(2.5 * var(--default-grid-baseline)) 0;
+}
+.cn-document-review-list__icon[data-v-9a0e5e62] {
+	color: var(--color-text-maxcontrast);
+	flex: none;
+}
+.cn-document-review-list__text[data-v-9a0e5e62] {
+	display: flex;
+	flex: 1 1 220px;
+	flex-direction: column;
+	min-width: 0;
+}
+.cn-document-review-list__name[data-v-9a0e5e62] {
+	font-weight: 500;
+	overflow-wrap: anywhere;
+}
+a.cn-document-review-list__name[data-v-9a0e5e62] {
+	color: var(--color-primary-element);
+	text-decoration: underline;
+}
+.cn-document-review-list__meta[data-v-9a0e5e62] {
+	font-size: 0.9em;
+}
+.cn-document-review-list__status[data-v-9a0e5e62] {
+	flex: none;
+}
+
+
+.cn-case-widget-card[data-v-22291596] {
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large);
+	padding: calc(5 * var(--default-grid-baseline));
+}
+
 /* required styles */
 
 .leaflet-pane,
@@ -5602,6 +5855,103 @@ svg.leaflet-image-layer.leaflet-interactive path {
 }
 
 
+.cn-next-step-card[data-v-3a9ce962] {
+	align-items: center;
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large);
+	/* The edge says "this is the thing to act on". An inset shadow, so it
+	   follows the card's rounded corners instead of squaring them off. */
+	box-shadow: inset 4px 0 0 var(--color-primary-element);
+	display: flex;
+	flex-wrap: wrap;
+	gap: calc(4 * var(--default-grid-baseline)) calc(8 * var(--default-grid-baseline));
+	padding: calc(5 * var(--default-grid-baseline)) calc(6 * var(--default-grid-baseline));
+	padding-inline-start: calc(7 * var(--default-grid-baseline));
+}
+.cn-next-step-card__main[data-v-3a9ce962] {
+	display: flex;
+	flex: 1 1 420px;
+	flex-direction: column;
+	gap: calc(2.5 * var(--default-grid-baseline));
+	min-width: 0;
+}
+.cn-next-step-card__title[data-v-3a9ce962] {
+	color: var(--color-main-text);
+	font-size: 0.85em;
+	font-weight: 700;
+	letter-spacing: 0.06em;
+	margin: 0;
+	text-transform: uppercase;
+}
+.cn-next-step-card__list[data-v-3a9ce962] {
+	display: grid;
+	gap: calc(2 * var(--default-grid-baseline));
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+.cn-next-step-card__item[data-v-3a9ce962] {
+	align-items: center;
+	color: var(--color-text-maxcontrast);
+	display: flex;
+	flex-wrap: wrap;
+	gap: calc(2.5 * var(--default-grid-baseline));
+}
+.cn-next-step-card__item--current[data-v-3a9ce962] {
+	color: var(--color-main-text);
+}
+.cn-next-step-card__item--current .cn-next-step-card__label[data-v-3a9ce962] {
+	font-weight: 700;
+}
+.cn-next-step-card__marker[data-v-3a9ce962] {
+	align-items: center;
+	border: 2px solid var(--color-border-maxcontrast);
+	border-radius: 50%;
+	box-sizing: border-box;
+	display: inline-flex;
+	flex: none;
+	height: 20px;
+	justify-content: center;
+	width: 20px;
+}
+.cn-next-step-card__item--current .cn-next-step-card__marker[data-v-3a9ce962] {
+	border-color: var(--color-primary-element);
+}
+.cn-next-step-card__item--done .cn-next-step-card__marker[data-v-3a9ce962] {
+	background: var(--color-primary-element);
+	border-color: var(--color-primary-element);
+	color: var(--color-primary-element-text);
+}
+.cn-next-step-card__hint[data-v-3a9ce962] {
+	color: var(--color-text-maxcontrast);
+	font-weight: 400;
+}
+
+/* Read, not seen. */
+.cn-next-step-card__state[data-v-3a9ce962] {
+	border: 0;
+	clip-path: inset(50%);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+}
+.cn-next-step-card__side[data-v-3a9ce962] {
+	align-items: flex-start;
+	display: flex;
+	flex-direction: column;
+	gap: calc(2 * var(--default-grid-baseline));
+}
+.cn-next-step-card__after[data-v-3a9ce962] {
+	color: var(--color-text-maxcontrast);
+	font-size: 0.9em;
+}
+
+
 .cn-fk-resolve-cell[data-v-471db666] {
 	white-space: nowrap;
 	overflow: hidden;
@@ -5623,6 +5973,52 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .cn-cell-renderer__dash[data-v-37d7b88f] {
 	color: var(--color-text-maxcontrast);
 }
+.cn-cell-renderer__avatar[data-v-37d7b88f] {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	max-width: 100%;
+	vertical-align: middle;
+}
+.cn-cell-renderer__avatar-picture[data-v-37d7b88f] {
+	display: inline-flex;
+	flex: none;
+}
+.cn-cell-renderer__avatar-initials[data-v-37d7b88f] {
+	display: inline-flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	background-color: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+	font-size: 0.75em;
+	font-weight: 700;
+	line-height: 1;
+}
+.cn-cell-renderer__avatar-name[data-v-37d7b88f] {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* A date that matched a rule is also set in a heavier weight, so the signal
+   does not rest on colour alone. */
+.cn-cell-renderer__date--success[data-v-37d7b88f],
+.cn-cell-renderer__date--warning[data-v-37d7b88f],
+.cn-cell-renderer__date--error[data-v-37d7b88f] {
+	font-weight: 600;
+}
+.cn-cell-renderer__date--success[data-v-37d7b88f] {
+	color: var(--color-text-success, var(--color-success-text));
+}
+.cn-cell-renderer__date--warning[data-v-37d7b88f] {
+	color: var(--color-text-warning, var(--color-warning-text));
+}
+.cn-cell-renderer__date--error[data-v-37d7b88f] {
+	color: var(--color-text-error, var(--color-error-text));
+}
 .cn-cell-renderer__icon--success[data-v-37d7b88f] {
 	color: var(--color-success);
 }
@@ -5995,6 +6391,32 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	background-color: var(--color-primary-light);
 }
 
+/* A row with a route is a real link (see CnDataTable's row link): the anchor
+   in its first cell is stretched over the whole row. The row's own controls
+   sit above it so they stay usable; keep the list in step with NESTED_CONTROL
+   in utils/rowAuxClick.js. */
+.cn-table-row--linked {
+	position: relative;
+}
+
+.cn-table-row__link {
+	position: absolute;
+	inset: 0;
+	cursor: pointer;
+}
+
+.cn-table-row__link:focus-visible {
+	outline: 2px solid var(--color-main-text);
+	outline-offset: -2px;
+}
+
+.cn-table-row--linked .cn-table-col--checkbox,
+.cn-table-row--linked .cn-table-col--actions,
+.cn-table-row--linked td :is(a, button, input, select, textarea, label, summary, [role='button'], [role='checkbox'], [role='link'], [contenteditable='true']):not(.cn-table-row__link) {
+	position: relative;
+	z-index: 1;
+}
+
 /* Column Types */
 .cn-table-col--checkbox {
 	width: 50px;
@@ -9701,14 +10123,18 @@ a.cn-deck-tab__card-title[data-v-3501a864]:hover {
 	background: none;
 	border: none;
 	padding: 6px 0;
-	cursor: pointer;
 	text-align: left;
 	color: inherit;
 	font: inherit;
 	text-decoration: none;
 	box-sizing: border-box;
 }
-.cn-email-card__open:hover .cn-email-card__subject[data-v-fda51a6a] {
+
+/* Only a row with Mail ids is a link; the rest must not look clickable. */
+a.cn-email-card__open[data-v-fda51a6a] {
+	cursor: pointer;
+}
+a.cn-email-card__open:hover .cn-email-card__subject[data-v-fda51a6a] {
 	color: var(--color-primary-element);
 }
 .cn-email-card__avatar[data-v-fda51a6a] {
@@ -9949,10 +10375,14 @@ a.cn-deck-tab__card-title[data-v-3501a864]:hover {
 	border-radius: var(--border-radius-large, 8px);
 	color: inherit;
 	text-decoration: none;
-	cursor: pointer;
 	position: relative;
 }
-.cn-email-tab__row[data-v-0bcebbac]:hover {
+
+/* Only a row with Mail ids is a link; the rest must not look clickable. */
+a.cn-email-tab__row[data-v-0bcebbac] {
+	cursor: pointer;
+}
+a.cn-email-tab__row[data-v-0bcebbac]:hover {
 	background-color: var(--color-background-hover);
 }
 .cn-email-tab__unread-dot[data-v-0bcebbac] {
@@ -15528,6 +15958,81 @@ a.cn-xwiki-card__title[data-v-54e85fe3]:hover {
 }
 
 
+.cn-stacked-bar[data-v-c0bac1a2] {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	width: 100%;
+}
+.cn-stacked-bar__state[data-v-c0bac1a2] {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+}
+.cn-stacked-bar__bar[data-v-c0bac1a2] {
+	display: flex;
+	gap: 3px;
+	height: 12px;
+}
+.cn-stacked-bar__segment[data-v-c0bac1a2] {
+	flex-basis: 0;
+	min-width: 4px;
+	border-radius: 6px;
+}
+.cn-stacked-bar__legend[data-v-c0bac1a2] {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+	gap: 12px;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+.cn-stacked-bar__legend-item[data-v-c0bac1a2] {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+.cn-stacked-bar__label[data-v-c0bac1a2] {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 0.95em;
+	color: var(--color-text-maxcontrast);
+	overflow-wrap: anywhere;
+}
+.cn-stacked-bar__dot[data-v-c0bac1a2] {
+	flex: none;
+	width: 10px;
+	height: 10px;
+	border-radius: 3px;
+}
+.cn-stacked-bar__count[data-v-c0bac1a2] {
+	font-size: 1.5em;
+	font-weight: 700;
+	line-height: 1.2;
+	color: var(--color-main-text);
+}
+
+
+.cn-stacked-bar-form[data-v-56e6c6a2] {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+.cn-stacked-bar-form__row2[data-v-56e6c6a2] {
+	display: flex;
+	gap: 12px;
+	align-items: flex-end;
+}
+.cn-stacked-bar-form__row2[data-v-56e6c6a2] > * {
+	flex: 1;
+	min-width: 0;
+}
+
+
 .cn-transition-input[data-v-1529f8b6] {
 	display: flex;
 	flex-direction: column;
@@ -17000,6 +17505,100 @@ to { background-position: -200% 0;
 	color: inherit;
 }
 
+/* Attention card. The severity edge is an inset shadow, so it takes no width. */
+.cn-banner-widget--attention[data-v-3531692f] {
+	--cn-banner-accent: var(--color-primary-element);
+	--cn-banner-accent-text: var(--color-primary-element);
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 16px 24px;
+	box-sizing: border-box;
+	padding: 20px 24px 20px 28px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-container, var(--border-radius-large, 12px));
+	background: var(--color-main-background);
+	box-shadow: inset 4px 0 0 0 var(--cn-banner-accent);
+}
+.cn-banner-widget--attention.cn-banner-widget--warning[data-v-3531692f] {
+	--cn-banner-accent: var(--color-element-warning, var(--color-warning));
+	--cn-banner-accent-text: var(--color-text-warning, var(--color-warning-text, var(--color-main-text)));
+}
+.cn-banner-widget--attention.cn-banner-widget--error[data-v-3531692f] {
+	--cn-banner-accent: var(--color-element-error, var(--color-error));
+	--cn-banner-accent-text: var(--color-text-error, var(--color-error-text));
+}
+.cn-banner-widget--attention.cn-banner-widget--success[data-v-3531692f] {
+	--cn-banner-accent: var(--color-element-success, var(--color-success));
+	--cn-banner-accent-text: var(--color-text-success, var(--color-success-text));
+}
+.cn-banner-widget__body[data-v-3531692f] {
+	display: flex;
+	flex: 1 1 320px;
+	flex-direction: column;
+	gap: 6px;
+	min-width: 0;
+}
+.cn-banner-widget__kicker[data-v-3531692f] {
+	margin: 0;
+	font-size: 0.85em;
+	font-weight: 700;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	color: var(--cn-banner-accent-text);
+}
+.cn-banner-widget__title[data-v-3531692f] {
+	margin: 0;
+	font-size: 1.3em;
+	font-weight: 700;
+	line-height: 1.3;
+	color: var(--color-main-text);
+}
+.cn-banner-widget__reason[data-v-3531692f] {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+}
+.cn-banner-widget__actions[data-v-3531692f] {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+}
+.cn-banner-widget__action[data-v-3531692f] {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	min-height: var(--default-clickable-area, 40px);
+	margin: 0;
+	padding: 0 16px;
+	border: 1px solid var(--color-border-maxcontrast);
+	border-radius: var(--border-radius-element, var(--border-radius-large, 8px));
+	font: inherit;
+	font-weight: 600;
+	text-decoration: none;
+	cursor: pointer;
+}
+.cn-banner-widget__action--secondary[data-v-3531692f] {
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+}
+.cn-banner-widget__action--secondary[data-v-3531692f]:hover {
+	background: var(--color-background-hover);
+}
+.cn-banner-widget__action--primary[data-v-3531692f] {
+	border-color: var(--color-primary-element);
+	background: var(--color-primary-element);
+	color: var(--color-primary-element-text);
+}
+.cn-banner-widget__action--primary[data-v-3531692f]:hover {
+	border-color: var(--color-primary-element-hover);
+	background: var(--color-primary-element-hover);
+}
+.cn-banner-widget__action[data-v-3531692f]:focus-visible {
+	outline: 2px solid var(--color-main-text);
+	outline-offset: 2px;
+}
+
 
 .cn-divider-widget[data-v-621c1f75] {
 	width: 100%;
@@ -17052,6 +17651,15 @@ to { background-position: -200% 0;
 	border-radius: var(--border-radius-large, 8px);
 	overflow: hidden;
 }
+.cn-header-widget--plain[data-v-1b97430f] {
+	min-height: 0;
+	border-radius: 0;
+}
+.cn-header-widget__date[data-v-1b97430f] {
+	font-size: 14px;
+	line-height: 1.4;
+	margin: 0;
+}
 .cn-header-widget__overlay[data-v-1b97430f] {
 	position: absolute;
 	inset: 0;
@@ -17677,7 +18285,11 @@ to { background-position: -200% 0;
 }
 
 /* A fade over the clipped edge, only on the side that hides tabs. Stops a
-   pixel above the bar's rule so the rule keeps its full colour. */
+   pixel above the bar's rule so the rule keeps its full colour.
+
+   z-index 2 so the fades outrank a lifted tab: CnTabsWidget puts the open tab
+   at 1, and a tie goes to DOM order, which would draw that tab over the start
+   fade (it precedes the tabs) while the end fade still covered it. */
 .cn-tabs__strip[data-v-5c1a056f]::before,
 .cn-tabs__strip[data-v-5c1a056f]::after {
 	content: '';
@@ -17686,7 +18298,7 @@ to { background-position: -200% 0;
 	pointer-events: none;
 	position: absolute;
 	width: 56px;
-	z-index: 1;
+	z-index: 2;
 }
 .cn-tabs__strip[data-v-5c1a056f]::before {
 	background: linear-gradient(to right, var(--color-main-background) 30%, transparent);
@@ -17720,7 +18332,7 @@ to { background-position: -200% 0;
 	padding: 0;
 	position: absolute;
 	width: 28px;
-	z-index: 2;
+	z-index: 3;
 }
 
 /* Nextcloud's `button:hover` rule would otherwise fill the chevron. */
@@ -17734,6 +18346,33 @@ to { background-position: -200% 0;
 .cn-tabs__scroll--end[data-v-5c1a056f] {
 	inset-inline-end: 0;
 }
+
+/* The count behind a tab's title. Full-contrast text on the page background,
+   so it reads on the idle tab's darker fill and on the open tab alike. */
+.cn-tabs__count[data-v-5c1a056f] {
+	background-color: var(--color-main-background);
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--border-radius-pill, 100px);
+	color: var(--color-main-text);
+	display: inline-block;
+	font-size: 0.85em;
+	line-height: 1.4;
+	margin-inline-start: 6px;
+	min-width: 1.4em;
+	padding: 0 6px;
+	text-align: center;
+}
+.cn-tabs__more[data-v-5c1a056f] {
+	align-items: center;
+	display: flex;
+	flex: 0 0 auto;
+}
+
+/* Keeps a "More" entry's text on the menu's text column without drawing an icon. */
+.cn-tabs__more-spacer[data-v-5c1a056f] {
+	display: inline-block;
+	width: 20px;
+}
 .cn-tabs__nav-end[data-v-5c1a056f] {
 	align-items: center;
 	display: flex;
@@ -17840,6 +18479,42 @@ to { background-position: -200% 0;
 	padding: 12px;
 }
 
+/* Segmented variant: the strip is a pill switch that stands on its own, so
+   the bar's rule and the tab-joins-panel treatment are both dropped. */
+.cn-tabs--segmented .cn-tabs__bar[data-v-5c1a056f] {
+	border-bottom: none;
+}
+.cn-tabs--segmented .cn-tabs__strip[data-v-5c1a056f] {
+	flex: 0 1 auto;
+}
+.cn-tabs--segmented .cn-tabs__nav[data-v-5c1a056f] {
+	gap: 4px;
+	margin-bottom: 0;
+	padding: 4px;
+	border-radius: var(--border-radius-container, var(--border-radius-large, 10px));
+	background-color: var(--color-background-dark);
+}
+.cn-tabs--segmented .cn-tabs__nav-item[data-v-5c1a056f] {
+	border: 1px solid transparent;
+	border-radius: var(--border-radius-element, var(--border-radius-large, 8px));
+	background-color: transparent;
+	font-weight: 600;
+	padding: 6px 16px;
+}
+.cn-tabs--segmented .cn-tabs__nav-item[data-v-5c1a056f]:hover {
+	background-color: var(--color-background-hover);
+}
+
+/* The open segment is the raised one. Its border survives forced-colours
+   mode, which drops the background and the shadow. */
+.cn-tabs--segmented .cn-tabs__nav-item--active[data-v-5c1a056f] {
+	border: 1px solid var(--color-border-dark);
+	background-color: var(--color-main-background);
+	box-shadow: 0 1px 2px var(--color-box-shadow);
+	font-weight: 600;
+	padding-top: 6px;
+}
+
 
 /* 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
@@ -17986,6 +18661,135 @@ to { background-position: -200% 0;
 }
 
 
+.cn-week-strip[data-v-153dd4cb] {
+	width: 100%;
+}
+.cn-week-strip__state[data-v-153dd4cb] {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin: 0;
+	padding: 12px 4px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-week-strip__scroll[data-v-153dd4cb] {
+	overflow-x: auto;
+	border-radius: var(--border-radius-large, 8px);
+}
+.cn-week-strip__scroll[data-v-153dd4cb]:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+}
+.cn-week-strip__days[data-v-153dd4cb] {
+	display: grid;
+	grid-template-columns: repeat(var(--cn-week-strip-columns, 5), minmax(128px, 1fr));
+	gap: 10px;
+	/* 5 columns of 128px plus gaps: below this the region scrolls sideways. */
+	min-width: calc(var(--cn-week-strip-columns, 5) * 136px);
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+.cn-week-strip__day[data-v-153dd4cb] {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	min-width: 0;
+	padding: 10px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large, 8px);
+	background: var(--color-background-hover);
+}
+.cn-week-strip__day--today[data-v-153dd4cb] {
+	border-color: var(--color-primary-element);
+	background: var(--color-primary-element-light);
+}
+.cn-week-strip__head[data-v-153dd4cb] {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 6px;
+	font-size: 0.85em;
+	font-weight: 600;
+	color: var(--color-main-text);
+}
+.cn-week-strip__today[data-v-153dd4cb] {
+	padding: 1px 8px;
+	border-radius: var(--border-radius-pill, 10px);
+	background: var(--color-primary-element);
+	color: var(--color-primary-element-text);
+	font-size: 0.85em;
+	font-weight: 700;
+}
+.cn-week-strip__items[data-v-153dd4cb] {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+.cn-week-strip__item[data-v-153dd4cb] {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	padding: 10px 12px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large, 8px);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	text-decoration: none;
+}
+.cn-week-strip__item--link[data-v-153dd4cb]:hover {
+	border-color: var(--color-primary-element);
+}
+.cn-week-strip__item--link[data-v-153dd4cb]:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+}
+
+/* The edge is drawn inside the box, so a late item is as wide as the others. */
+.cn-week-strip__item--late[data-v-153dd4cb] {
+	border-color: var(--color-element-error, var(--color-error));
+	box-shadow: inset 3px 0 0 0 var(--color-element-error, var(--color-error));
+}
+.cn-week-strip__title[data-v-153dd4cb] {
+	font-size: 0.95em;
+	line-height: 1.3;
+	overflow-wrap: anywhere;
+}
+.cn-week-strip__meta[data-v-153dd4cb] {
+	font-size: 0.85em;
+	color: var(--color-text-maxcontrast);
+	overflow-wrap: anywhere;
+}
+.cn-week-strip__late[data-v-153dd4cb] {
+	font-size: 0.8em;
+	font-weight: 600;
+	color: var(--color-text-error, var(--color-error-text));
+}
+.cn-week-strip__empty[data-v-153dd4cb] {
+	font-size: 0.9em;
+	color: var(--color-text-maxcontrast);
+}
+
+
+.cn-week-strip-form[data-v-4a9dc393] {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+.cn-week-strip-form__row2[data-v-4a9dc393] {
+	display: flex;
+	gap: 12px;
+	align-items: flex-end;
+}
+.cn-week-strip-form__row2[data-v-4a9dc393] > * {
+	flex: 1;
+	min-width: 0;
+}
+
+
 .cn-color-picker__swatch[data-v-307491dd] {
 	--cn-color-picker-checker:
 		linear-gradient(45deg, var(--color-background-dark) 25%, transparent 25%),
@@ -23130,6 +23934,29 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-75628
   display: block;
 }
 
+/* A late card: an edge in the error colour, drawn as an inset shadow so the
+   card keeps its size and its rounded corners. The label below carries the
+   meaning; the edge only helps a sighted reader find it. */
+.cn-board-view__card--overdue[data-v-997a7a5e] {
+  border-color: var(--color-error);
+  box-shadow: inset 3px 0 0 var(--color-error);
+}
+
+.cn-board-view__due[data-v-997a7a5e] {
+  display: block;
+  font-size: 0.85em;
+  font-weight: 700;
+}
+
+.cn-board-view__due--overdue[data-v-997a7a5e] {
+  color: var(--color-error-text, var(--color-error));
+}
+
+.cn-board-view__due--soon[data-v-997a7a5e] {
+  color: var(--color-warning-text, var(--color-main-text));
+  font-weight: 600;
+}
+
 /*
  * The card's opening control. The cursor and the focus ring live here now,
  * on the thing that actually does something, rather than on the box.
@@ -23365,6 +24192,25 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-75628
 .cn-object-kanban__card--pending[data-v-3523a46f] {
 	opacity: 0.6;
 }
+
+/* A late card. The label carries the meaning; the edge helps a sighted
+   reader find it. An inset shadow, so the card keeps its size. */
+.cn-object-kanban__card--overdue[data-v-3523a46f] {
+	border-color: var(--color-error);
+	box-shadow: inset 3px 0 0 var(--color-error);
+}
+.cn-object-kanban__due[data-v-3523a46f] {
+	display: block;
+	font-size: 0.85em;
+	font-weight: 700;
+}
+.cn-object-kanban__due--overdue[data-v-3523a46f] {
+	color: var(--color-error-text, var(--color-error));
+}
+.cn-object-kanban__due--soon[data-v-3523a46f] {
+	color: var(--color-warning-text, var(--color-main-text));
+	font-weight: 600;
+}
 .cn-object-kanban__card-title[data-v-3523a46f] {
 	font-weight: 500;
 	cursor: pointer;
@@ -27419,6 +28265,21 @@ to {
 	line-height: 1;
 }
 
+/* Inherits the chip's own text colour, so it stays readable on the active
+   (primary) fill as well as on the resting one. The count's text starts with
+   a space: the chip is a flex row, so the space is not drawn, but it keeps a
+   screen reader from reading label and count as one word. */
+.cn-quick-filter-bar__count[data-v-8e121822] {
+	min-width: 1.5em;
+	padding: 2px 6px;
+	border: 1px solid currentColor;
+	border-radius: var(--border-radius-pill, 10px);
+	font-size: 0.85em;
+	font-weight: 600;
+	line-height: 1;
+	text-align: center;
+}
+
 /* NcPopover wraps its trigger in a plain `<div class="v-popper">`, which as a
    block would drop the chip onto its own line under the strip. */
 .cn-quick-filter-bar[data-v-8e121822] >  .v-popper {
@@ -31411,6 +32272,39 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 }
 
 
+/* The brand block at the top of the navigation. */
+.cn-app-nav__brand {
+	align-items: center;
+	display: flex;
+	gap: calc(2.5 * var(--default-grid-baseline));
+	min-width: 0;
+	padding: calc(2 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline)) calc(3 * var(--default-grid-baseline));
+}
+.cn-app-nav__brand-logo {
+	flex: none;
+	height: 34px;
+	max-width: 50%;
+	object-fit: contain;
+	width: auto;
+}
+.cn-app-nav__brand-text {
+	display: flex;
+	flex-direction: column;
+	line-height: 1.15;
+	min-width: 0;
+}
+.cn-app-nav__brand-name {
+	color: var(--color-main-text);
+	font-size: 1.2em;
+	font-weight: 700;
+	overflow-wrap: anywhere;
+}
+.cn-app-nav__brand-caption {
+	color: var(--color-text-maxcontrast);
+	font-size: 0.85em;
+	overflow-wrap: anywhere;
+}
+
 /*
  * The legacy `icon-*` classes in Nextcloud render a background-image
  * with a hardcoded dark fill, so they stay grey when an entry becomes
@@ -33261,6 +34155,103 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 }
 
 
+.cn-segmented-control[data-v-7b344b4f] {
+	display: inline-flex;
+	gap: 4px;
+	max-width: 100%;
+	padding: 4px;
+	border-radius: var(--border-radius-container, var(--border-radius-large, 10px));
+	background-color: var(--color-background-dark);
+	overflow-x: auto;
+}
+.cn-segmented-control--stretch[data-v-7b344b4f] {
+	display: flex;
+}
+.cn-segmented-control--stretch .cn-segmented-control__option[data-v-7b344b4f] {
+	flex: 1 1 0;
+}
+
+/* The parent class outscores Nextcloud's server rule that gives every plain
+   `button` a margin and a border. */
+.cn-segmented-control .cn-segmented-control__option[data-v-7b344b4f] {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	box-sizing: border-box;
+	min-height: 36px;
+	margin: 0;
+	padding: 0 16px;
+	border: 1px solid transparent;
+	border-radius: var(--border-radius-element, var(--border-radius-large, 8px));
+	background-color: transparent;
+	/* Full-contrast label on every option: the choice is carried by the
+	   raised surface, not by dimming the others. */
+	color: var(--color-main-text);
+	font: inherit;
+	font-weight: 600;
+	white-space: nowrap;
+	cursor: pointer;
+}
+.cn-segmented-control .cn-segmented-control__option[data-v-7b344b4f]:hover {
+	background-color: var(--color-background-hover);
+}
+.cn-segmented-control .cn-segmented-control__option[data-v-7b344b4f]:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+}
+
+/* The border survives forced-colours mode, which drops background and shadow. */
+.cn-segmented-control .cn-segmented-control__option--checked[data-v-7b344b4f],
+.cn-segmented-control .cn-segmented-control__option--checked[data-v-7b344b4f]:hover {
+	border-color: var(--color-border-dark);
+	background-color: var(--color-main-background);
+	box-shadow: 0 1px 2px var(--color-box-shadow);
+}
+.cn-segmented-control .cn-segmented-control__option[disabled][data-v-7b344b4f] {
+	cursor: default;
+	opacity: 0.5;
+}
+.cn-segmented-control__count[data-v-7b344b4f] {
+	font-weight: 400;
+}
+
+
+.cn-brand-stripe[data-v-6fdfa763] {
+	display: flex;
+	flex: none;
+	width: 100%;
+	height: var(--cn-brand-stripe-height, 4px);
+}
+.cn-brand-stripe--vertical[data-v-6fdfa763] {
+	flex-direction: column;
+	width: var(--cn-brand-stripe-height, 4px);
+	height: 100%;
+}
+.cn-brand-stripe__band[data-v-6fdfa763] {
+	flex-basis: 0;
+	flex-shrink: 1;
+}
+.cn-brand-stripe__band--1[data-v-6fdfa763] {
+	flex-grow: var(--cn-brand-stripe-ratio-1, 1);
+	background-color: var(--cn-brand-stripe-color-1, var(--color-primary-element));
+}
+.cn-brand-stripe__band--2[data-v-6fdfa763] {
+	flex-grow: var(--cn-brand-stripe-ratio-2, 1);
+	background-color: var(--cn-brand-stripe-color-2, var(--color-primary-element));
+}
+.cn-brand-stripe__band--3[data-v-6fdfa763] {
+	flex-grow: var(--cn-brand-stripe-ratio-3, 1);
+	background-color: var(--cn-brand-stripe-color-3, var(--color-primary-element));
+}
+@media print {
+.cn-brand-stripe[data-v-6fdfa763] {
+		print-color-adjust: exact;
+		-webkit-print-color-adjust: exact;
+}
+}
+
+
 .cn-ai-agent-picker {
 	width: 100%;
 }