/* ───────────────────────── Components ─────────────────────────
 * Nextcloud's components restyled after the design system's shadcn components (ClientPanel:
 * app/components/ui/*). Colours come from tokens.css; this file only changes shape, borders and states.
 *
 * Every rule starts with the Raya-theme scope below, (0,2,1), so it never applies under a high-contrast
 * theme and outranks the scoped [data-v-*] rules of @nextcloud/vue (0,2,0). Where Nextcloud uses
 * !important, so does this file.
 */

/* ───────── Logos ─────────
 * RayaCloud's uploaded logos are white on transparent: dark on the light page, as they are on the dark one.
 */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) {
	--ds-logo-filter: brightness(0) saturate(100%);
}
body[data-theme-dark]:not([data-theme-dark-highcontrast]) {
	--ds-logo-filter: none;
}
@media (prefers-color-scheme: dark) {
	body:is([data-theme-default], [data-themes=""]):not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) {
		--ds-logo-filter: none;
	}
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) :is(#header .logo, .guest-box .logo, #body-login .logo, #body-public .header-start .logo) {
	filter: var(--ds-logo-filter) !important;
}

/* ───────── Body container: the white «inset» card on the sidebar-coloured page ───────── */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #content {
	box-shadow: 0 0 0 1px var(--ds-sidebar-border), var(--ds-shadow-xs);
}

/* ───────── Header: app menu ─────────
 * Nextcloud shows every app's name inside its 50px box while the bar is hovered (icons jump up, long names are cut
 * off) and marks the current app with a small dot. Here: 36px icon buttons, the current app a solid primary chip,
 * and the name of the hovered app only, as a tooltip under it.
 */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu-entry__link {
	width: 36px;
	height: 36px;
	margin: 7px;
	border-radius: var(--ds-radius-md);
	transition: background-color 0.15s;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu-entry .app-menu-entry__icon,
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu__list:is(:hover, :focus-within) .app-menu-entry__icon {
	margin-block-end: 0 !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu-entry:not(.app-menu-entry--active):is(:hover, :focus-within) .app-menu-entry__link {
	background-color: var(--ds-sidebar-accent);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu-entry--active .app-menu-entry__link {
	background-color: var(--ds-primary);
	box-shadow: var(--ds-shadow-xs);
}
/* The icons are white SVGs that Nextcloud inverts on a bright header; on the primary chip they follow the primary */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu-entry--active .app-menu-icon__icon {
	filter: var(--primary-invert-if-bright);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu-entry--active::before {
	display: none;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu-entry__link:focus-visible {
	box-shadow: 0 0 0 2px var(--ds-sidebar), 0 0 0 4px var(--ds-focus);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu-entry__link:focus-visible::after {
	display: none;
}

/* Name tooltip */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu-entry__label {
	top: calc(100% + 10px) !important;
	bottom: auto !important;
	z-index: 2000;
	max-width: none !important;
	padding: 4px 8px;
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-primary);
	box-shadow: var(--ds-shadow-md);
	color: var(--ds-primary-foreground) !important;
	font-size: 12px;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	line-height: 1.4;
	white-space: nowrap;
	overflow: visible !important;
	opacity: 0 !important;
	pointer-events: none;
	transition: opacity 0.12s ease-out !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu-entry:is(:hover, :focus-within) .app-menu-entry__label {
	opacity: 1 !important;
	transition-delay: 0.25s !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu-entry .app-menu-icon__unread {
	opacity: 1 !important;
}
/* «More apps» (narrow screens): Nextcloud inverts this button like the white app icons, but its dots already take the
 * header's text colour, so on the light header they came out light grey on white */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu__overflow .button-vue--vue-tertiary {
	filter: none;
	opacity: 1;
	width: 36px;
	min-width: 36px;
	height: 36px;
	min-height: 36px;
	margin: 7px;
	border-radius: var(--ds-radius-md);
	color: var(--color-background-plain-text);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu__overflow .button-vue--vue-tertiary:is(:hover, [aria-expanded="true"]) {
	background-color: var(--ds-sidebar-accent);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu__overflow .button-vue--vue-tertiary:focus-visible {
	box-shadow: 0 0 0 2px var(--ds-sidebar), 0 0 0 4px var(--ds-focus) !important;
}

/* ───────── Header, Nextcloud 34 ─────────
 * Nextcloud 34 replaces the row of app icons with a waffle button, the current app's name (both open a launcher
 * popover) and a search field in the middle. These rules only match that structure, so Nextcloud 33 (the row of
 * icons above) is unaffected; the header menus at the other end are the same in both and styled below.
 */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header :is(.app-menu__waffle, .app-menu__current-app) {
	--button-size: 36px !important;
	min-height: 36px !important;
	height: 36px !important;
	margin: 7px 2px !important;
	border-radius: var(--ds-radius-md) !important;
	color: var(--color-background-plain-text) !important;
	transition: background-color 0.15s;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .app-menu__waffle {
	width: 36px !important;
	min-width: 36px !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header :is(.app-menu__waffle, .app-menu__current-app):is(:hover, [aria-expanded="true"]):not(:disabled) {
	background-color: var(--ds-sidebar-accent) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header :is(.app-menu__waffle, .app-menu__current-app):active:not(:disabled) {
	background-color: var(--ds-accent-hover) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header :is(.app-menu__waffle, .app-menu__current-app):focus-visible {
	background-color: transparent !important;
	box-shadow: 0 0 0 2px var(--ds-sidebar), 0 0 0 4px var(--ds-focus) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .app-menu__current-app-name {
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
}
/* the search field in the middle: a design-system input instead of a grey block */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .unified-search-input__button {
	height: 36px !important;
	border: 1px solid var(--ds-border) !important;
	border-radius: var(--ds-radius-md) !important;
	background: var(--ds-background) !important;
	box-shadow: var(--ds-shadow-xs);
	color: var(--ds-muted-foreground) !important;
	transition: border-color 0.15s, box-shadow 0.15s;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .unified-search-input__button:hover {
	border-color: var(--ds-border-strong) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .unified-search-input__button:focus-visible {
	outline: none !important;
	border-color: var(--ds-ring-strong, var(--ds-border-strong)) !important;
	box-shadow: 0 0 0 3px var(--ds-ring) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .unified-search-input__label {
	color: var(--ds-muted-foreground) !important;
}
/* the launcher: soft rounded tiles with the icon in the text colour, the current app a solid primary tile */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu__popover-base .app-menu__grid {
	gap: 2px;
	padding: 8px !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu__popover-base .app-item {
	border-radius: var(--ds-radius-lg) !important;
	padding-block: 6px !important;
	transition: background-color 0.15s;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu__popover-base .app-item:is(:hover, :focus-visible) {
	background-color: var(--ds-accent) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu__popover-base .app-item:focus-visible {
	box-shadow: inset 0 0 0 2px var(--ds-focus) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu__popover-base .app-item__circle {
	border-radius: 12px !important;
	background: var(--ds-muted) !important;
	box-shadow: inset 0 0 0 1px var(--ds-border) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu__popover-base .app-item__icon {
	filter: var(--ds-sidebar-invert-if-bright) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu__popover-base .app-item--active .app-item__circle {
	background: var(--ds-primary) !important;
	box-shadow: var(--ds-shadow-xs) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu__popover-base .app-item--active .app-item__icon {
	filter: var(--primary-invert-if-bright) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu__popover-base .app-item--outlined .app-item__circle {
	background: transparent !important;
	box-shadow: inset 0 0 0 1.5px var(--ds-border-strong) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu__popover-base .app-item--outlined .app-item__icon {
	filter: var(--background-invert-if-dark) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu__popover-base .app-item__label {
	color: var(--ds-foreground) !important;
	letter-spacing: 0 !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-menu__popover-base .app-item--active .app-item__label {
	font-weight: 600 !important;
}

/* What's New (firstrunwizard): its decorative 10px bar at the dialog's top takes the primary colour, a black band
 * in this theme. Same markup in Nextcloud 33 and 34. */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #firstrunwizard [class*="_background_bar_"] {
	display: none !important;
}

/* Header menus on the other side (search, contacts, notifications, account): Nextcloud makes each trigger a
 * 50px square, so its hover filled the whole bar. Here: the same 36px chip as the app menu and the light / dark switch. */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .header-end .header-menu__trigger {
	--button-size: 36px !important;
	width: 36px !important;
	min-width: 36px !important;
	height: 36px !important;
	min-height: 36px !important;
	margin: 7px 2px;
	border-radius: var(--ds-radius-md) !important;
	opacity: 1;
	transition: background-color 0.15s;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .header-end .header-menu__trigger :is(.button-vue__wrapper, .button-vue__icon) {
	width: 36px;
	min-width: 36px;
	height: 36px;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .header-end .header-menu__trigger:hover,
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .header-end .header-menu--opened .header-menu__trigger {
	background-color: var(--ds-sidebar-accent) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .header-end .header-menu__trigger:focus-visible {
	box-shadow: 0 0 0 2px var(--ds-sidebar), 0 0 0 4px var(--ds-focus) !important;
}
/* The account menu is the avatar itself: a ring instead of a chip, and no jumping 2px border. The ring is wider than
 * the 36px button, which clips (overflow hidden) it into a square-cornered patch: the button lets it show. */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .header-end .account-menu .header-menu__trigger {
	background-color: transparent !important;
	overflow: visible !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .header-end .account-menu .header-menu__trigger :is(.button-vue__wrapper, .button-vue__icon) {
	overflow: visible !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .header-end .account-menu .account-menu__avatar {
	border: 0 !important;
	transition: box-shadow 0.15s;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .header-end .account-menu .header-menu__trigger:is(:hover, :focus-visible) .account-menu__avatar,
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .header-end .account-menu.header-menu--opened .account-menu__avatar {
	box-shadow: 0 0 0 2px var(--ds-sidebar), 0 0 0 4px var(--ds-input-hover);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .header-end .account-menu .header-menu__trigger:focus-visible {
	box-shadow: none !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .header-end .account-menu .header-menu__trigger:focus-visible .account-menu__avatar {
	box-shadow: 0 0 0 2px var(--ds-sidebar), 0 0 0 4px var(--ds-focus);
}

/* ───────── App navigation: the shadcn sidebar ───────── */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) :is(.app-navigation, #app-navigation:not(.vue)) {
	background-color: var(--ds-sidebar);
	border-inline-end: 1px solid var(--ds-sidebar-border);
}
/* Width: the design system's sidebar (Nextcloud hard-codes 300px, also in the closed offset) */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-navigation {
	width: var(--ds-nav-width);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) :is(.app-navigation--close, .app-navigation--closed) {
	margin-inline-start: calc(-1 * min(var(--ds-nav-width), var(--app-navigation-max-width, 100vw)));
}

/* Collapse by clicking the divider between sidebar and content (js/rayatheme-nav.js adds .rt-nav-divider, a button
   that presses Nextcloud's own toggle). On desktop the toggle icon itself is then hidden; on narrow screens, where
   the sidebar is an overlay, the toggle stays and the divider is not shown. */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .rt-nav-divider {
	display: none;
}
@media (min-width: 1025px) {
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-navigation:has(> .rt-nav-divider) .app-navigation-toggle-wrapper {
		display: none !important;
	}
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .rt-nav-divider {
		position: absolute;
		inset-block: 0;
		inset-inline-end: -7px;
		z-index: 1850;
		display: block;
		width: 13px;
		min-width: 0;
		min-height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		cursor: pointer;
	}
	/* the line: the sidebar border, stronger while hovered or focused */
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .rt-nav-divider::before {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-start: 6px;
		width: 1px;
		background-color: transparent;
		transition: background-color 0.15s, width 0.15s;
	}
	/* the handle: a small pill in the middle, shown on hover and always while the sidebar is closed */
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .rt-nav-divider::after {
		content: "";
		position: absolute;
		top: 50%;
		inset-inline-start: 4px;
		width: 5px;
		height: 36px;
		margin-top: -18px;
		border-radius: 999px;
		background-color: var(--ds-border-strong);
		opacity: 0;
		transition: opacity 0.15s, background-color 0.15s;
	}
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .rt-nav-divider:is(:hover, :focus-visible)::before {
		width: 2px;
		background-color: var(--ds-input-hover);
	}
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .rt-nav-divider:is(:hover, :focus-visible)::after,
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .rt-nav-divider--closed::after {
		opacity: 1;
	}
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .rt-nav-divider:is(:hover, :focus-visible)::after {
		background-color: var(--ds-muted-foreground);
	}
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .rt-nav-divider:focus-visible {
		outline: none;
	}
	/* closed: the button sits at the very start of the content, a little wider to be easy to hit */
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .rt-nav-divider--closed {
		inset-inline-end: -14px;
		width: 14px;
	}
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .rt-nav-divider--closed::before {
		inset-inline-start: 0;
	}
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .rt-nav-divider--closed::after {
		inset-inline-start: 4px;
	}
}

body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-navigation-entry {
	border-radius: var(--ds-radius-md);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-navigation-entry:not(.active):hover {
	background-color: var(--ds-sidebar-accent-hover);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-navigation-entry.active,
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-navigation-entry.active:hover {
	background-color: var(--ds-sidebar-accent) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-navigation-entry.active :is(.app-navigation-entry-link, .app-navigation-entry-button) {
	color: var(--ds-sidebar-accent-foreground) !important;
	font-weight: 600;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-navigation-entry.active .app-navigation-entry__actions:hover .button-vue {
	background-color: var(--ds-accent-hover) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-navigation-entry.active .app-navigation-entry__children,
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-navigation-entry:hover .app-navigation-entry__children,
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-navigation-entry:focus-within .app-navigation-entry__children {
	background-color: var(--ds-sidebar);
}
/* Counters (NcCounterBubble) inside an active entry read like a badge, not an inverted pill */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-navigation-entry.active .counter-bubble__counter {
	background-color: var(--ds-primary);
	color: var(--ds-primary-foreground);
}
/* Settings group captions («Personal», «Administration») */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-navigation-caption__name {
	color: var(--ds-muted-foreground);
	font-size: var(--font-size-small);
	font-weight: 600;
}

/* ───────── Buttons (NcButton): shadcn button ───────── */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .button-vue {
	border-bottom-width: 1px;
	padding-block: 0;
	font-weight: 500;
	transition-property: color, border-color, background-color, box-shadow, scale;
	transition-duration: 0.15s;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .button-vue:active:not(:disabled) {
	scale: 0.97;
	transition-duration: 75ms;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .button-vue:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 1px var(--ds-focus), 0 0 0 4px var(--ds-ring) !important;
}
/* default */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .button-vue--primary {
	border-color: var(--ds-primary);
	box-shadow: var(--ds-shadow-xs);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .button-vue--primary:active:not(:disabled) {
	background-color: var(--ds-primary-active);
}
/* secondary → shadcn outline: border, background, shadow-xs */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .button-vue--secondary,
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .button-vue:not([class*="button-vue--"]) {
	background-color: var(--ds-background);
	border-color: var(--ds-input);
	color: var(--ds-foreground);
	box-shadow: var(--ds-shadow-xs);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .button-vue--secondary:hover:not(:disabled) {
	background-color: var(--ds-accent);
	color: var(--ds-accent-foreground);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .button-vue--secondary:active:not(:disabled) {
	background-color: var(--ds-accent-hover);
}
/* tertiary → ghost */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) :is(.button-vue--tertiary, .button-vue--tertiary-no-background):hover:not(:disabled) {
	background-color: var(--ds-accent);
}
/* status */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .button-vue--error {
	background-color: var(--ds-destructive);
	border-color: var(--ds-destructive);
	color: var(--ds-destructive-foreground);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .button-vue--success {
	background-color: var(--ds-success);
	border-color: var(--ds-success);
	color: var(--ds-success-foreground);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .button-vue--warning {
	background-color: var(--ds-warning);
	border-color: var(--ds-warning);
	color: var(--ds-warning-foreground);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) :is(.button-vue--error, .button-vue--success, .button-vue--warning):hover:not(:disabled) {
	filter: brightness(0.92);
}

/* Legacy buttons (server.css). Only unclassed buttons and Nextcloud's own legacy classes: an app's buttons with
   classes of their own (round timer buttons, segmented controls…) keep their styles. */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) :is(button:not([class]), button.primary, input[type="button"], input[type="submit"], input[type="reset"], .button):not(:disabled) {
	border-radius: var(--ds-radius-md);
	font-weight: 500;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) :is(button.primary, input[type="submit"].primary, input[type="button"].primary, .button.primary) {
	background-color: var(--ds-primary);
	border-color: var(--ds-primary);
	color: var(--ds-primary-foreground);
}

/* ───────── Inputs (NcInputField / NcTextField / NcPasswordField, legacy inputs): shadcn input ─────────
 * A 1px border at rest; hover darkens it; focus = foreground border + a soft 3px ring.
 */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .input-field__input {
	--input-border-color: var(--ds-input);
	--input-border-box-shadow: 0 0 0 1px var(--ds-input), var(--ds-shadow-xs);
	box-shadow: var(--input-border-box-shadow);
	transition: box-shadow 0.15s;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .input-field__input:hover:not([disabled]) {
	box-shadow: 0 0 0 1px var(--ds-input-hover), var(--ds-shadow-xs);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .input-field__input:is(:focus-within, :active):not([disabled]) {
	box-shadow: 0 0 0 1px var(--ds-focus), 0 0 0 4px var(--ds-ring) !important;
}
/* NcSelect's search box carries the input class too: the select draws the border, the box inside must not */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .v-select .input-field__input,
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .v-select .input-field__input:is(:focus-within, :active):not([disabled]) {
	box-shadow: none !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .input-field--error .input-field__input {
	box-shadow: 0 0 0 1px var(--ds-destructive), var(--ds-shadow-xs);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .input-field--error .input-field__input:is(:focus-within, :active) {
	box-shadow: 0 0 0 1px var(--ds-destructive), 0 0 0 4px color-mix(in srgb, var(--ds-destructive) 20%, transparent) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .input-field__label {
	font-weight: 500;
}

/* Legacy form controls */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) :is(input:is([type="text"], [type="password"], [type="email"], [type="url"], [type="tel"], [type="number"], [type="search"], [type="date"], [type="datetime-local"], [type="time"]), textarea, select):not(.input-field__input, .vs__search) {
	border: 1px solid var(--ds-input);
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-background);
	box-shadow: var(--ds-shadow-xs);
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) :is(input:is([type="text"], [type="password"], [type="email"], [type="url"], [type="tel"], [type="number"], [type="search"], [type="date"], [type="datetime-local"], [type="time"]), textarea, select):not(.input-field__input, .vs__search):hover:not(:disabled) {
	border-color: var(--ds-input-hover);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) :is(input:is([type="text"], [type="password"], [type="email"], [type="url"], [type="tel"], [type="number"], [type="search"], [type="date"], [type="datetime-local"], [type="time"]), textarea, select):not(.input-field__input, .vs__search):focus {
	border-color: var(--ds-focus);
	box-shadow: 0 0 0 3px var(--ds-ring);
}

/* NcSelect (vue-select) */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .v-select.select .vs__dropdown-toggle {
	border: 1px solid var(--ds-input) !important;
	border-radius: var(--ds-radius-md);
	box-shadow: var(--ds-shadow-xs);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .v-select.select:hover .vs__dropdown-toggle {
	border-color: var(--ds-input-hover) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .v-select.select.vs--open .vs__dropdown-toggle,
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .v-select.select:focus-within .vs__dropdown-toggle {
	border-color: var(--ds-focus) !important;
	box-shadow: 0 0 0 3px var(--ds-ring);
	outline: none !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .vs__dropdown-menu {
	border: 1px solid var(--ds-border) !important;
	border-radius: var(--ds-radius-lg) !important;
	box-shadow: var(--ds-shadow-md) !important;
	padding: 4px !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .vs__dropdown-option {
	border-radius: var(--ds-radius-sm) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .vs__dropdown-option--highlight {
	background-color: var(--ds-accent) !important;
	color: var(--ds-accent-foreground) !important;
}

/* ───────── Popovers and action menus (NcActions, NcPopover): shadcn dropdown-menu ───────── */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .v-popper--theme-dropdown.v-popper__popper .v-popper__inner,
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .v-popper__popper[class*="v-popper--theme-nc-popover"] .v-popper__inner {
	background-color: var(--ds-popover);
	color: var(--ds-popover-foreground);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-lg);
	box-shadow: var(--ds-shadow-md);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .v-popper__arrow-container {
	display: none;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) :is(.action-button, .action-link, .action-router) {
	border-radius: var(--ds-radius-sm);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) :is(.action-button, .action-link, .action-router):is(:hover, :focus-visible) {
	background-color: var(--ds-accent);
	color: var(--ds-accent-foreground);
}

/* User menu, notifications, contacts menu (NcHeaderMenu) */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .header-menu__wrapper {
	/* 4px off the header, like the design system's dropdowns (sideOffset) */
	margin-top: 4px;
	background-color: var(--ds-popover) !important;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-lg) !important;
	box-shadow: var(--ds-shadow-lg) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) :is(.header-menu__carret, .header-menu__caret) {
	display: none !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .header-menu__content .empty-content {
	margin: 32px 16px !important;
}

/* Account menu: profile on top, then the status, a separator, compact 34px entries with muted 16px icons, and a
 * separator before «log out» (shadcn DropdownMenu) */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .account-menu__list {
	padding: 4px !important;
	min-width: 248px;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .account-menu__list :is(.list-item__wrapper) {
	padding: 0 !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .account-menu__list .list-item {
	min-height: 36px;
	padding: 0 8px !important;
	border-radius: var(--ds-radius-sm) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .account-menu__list .list-item__anchor {
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .account-menu__list .list-item-content {
	padding: 0 !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .account-menu__list .list-item-content__name {
	font-weight: 400;
}
/* profile: name and «view profile», with the QR code button */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .account-menu__list > li:first-child .list-item {
	padding-block: 6px !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .account-menu__list > li:first-child .list-item-content__name {
	font-weight: 600;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .account-menu__list > li:first-child .list-item-content__subname {
	color: var(--ds-muted-foreground);
	font-size: 12px;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .account-menu__list > li:first-child .list-item-content__extra-actions .button-vue {
	--button-size: 30px;
	min-width: 30px;
	min-height: 30px;
	background-color: transparent !important;
	border: 1px solid var(--ds-border) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .account-menu__list > li:first-child .list-item-content__extra-actions .button-vue:hover {
	background-color: var(--ds-accent) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .account-menu__list [class*="_userStatusMenuItem_"] .user-status-icon {
	margin: 0 !important;
}
/* separators */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .account-menu__list > :not(.account-menu-entry) + .account-menu-entry,
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .account-menu__list > .account-menu-entry:last-child {
	margin-top: 4px !important;
	padding-top: 4px !important;
	border-top: 1px solid var(--ds-border);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .account-menu-entry__icon {
	width: 16px !important;
	height: 16px !important;
	margin: 0 2px !important;
	opacity: 0.7;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .account-menu__list .list-item:hover .account-menu-entry__icon {
	opacity: 1;
}

/* Contacts menu: search on top, a divider, contact rows that highlight, a quiet footer link */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .contactsmenu__menu {
	height: auto !important;
	max-height: min(480px, calc(100vh - 120px)) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .contactsmenu__menu__search-container {
	padding: 8px !important;
	border-bottom: 1px solid var(--ds-border);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .contactsmenu__menu__content {
	margin-top: 0 !important;
	padding: 4px;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .contactsmenu__menu__content ul {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .contactsmenu__menu .contact {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 4px 8px !important;
	border-radius: var(--ds-radius-md);
	transition: background-color 0.12s;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .contactsmenu__menu .contact:is(:hover, :focus-within) {
	background-color: var(--ds-accent);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .contactsmenu__menu .contact__body {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .contactsmenu__menu .contact__body__full-name {
	font-weight: 500;
	line-height: 20px;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .contactsmenu__menu .contact__body__email-address {
	color: var(--ds-muted-foreground);
	font-size: 12px;
	line-height: 18px;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .contactsmenu__menu .contact :is(.action-items, > .button-vue) {
	opacity: 0.65;
	transition: opacity 0.12s;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .contactsmenu__menu .contact:is(:hover, :focus-within) :is(.action-items, > .button-vue) {
	opacity: 1;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .contactsmenu__menu .contact .button-vue {
	--button-size: 30px;
	min-width: 30px !important;
	min-height: 30px !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .contactsmenu__menu__content__footer {
	margin: 4px -4px -4px;
	padding: 4px;
	border-top: 1px solid var(--ds-border);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .contactsmenu__menu__content__footer .button-vue {
	min-height: 32px !important;
	color: var(--ds-muted-foreground) !important;
	font-size: 13px;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .contactsmenu__menu__content__footer .button-vue__text {
	font-weight: 500 !important;
}

/* Notifications: icon at the start, title and message beside it, the time under them, a small dismiss button in the
 * corner (Nextcloud put the time and the button on their own row above, ~150px a notification) */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .notification-container .notification-wrapper {
	max-height: min(520px, calc(100vh - 150px)) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .notification-container .notification {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 16px !important;
	padding-inline-end: 44px !important;
	border-bottom: 1px solid var(--ds-border);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .notification-container .notification:last-child {
	border-bottom: 0;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .notification-container .notification-heading {
	order: 9;
	min-height: 0 !important;
	padding-inline-start: 42px;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .notification-container .notification-heading .notification-time {
	margin: 2px 0 0 !important;
	color: var(--ds-muted-foreground);
	font-size: 12px;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .notification-container .notification-dismiss-button {
	position: absolute !important;
	top: 8px;
	inset-inline-end: 8px;
	--button-size: 28px;
	min-width: 28px !important;
	min-height: 28px !important;
	margin: 0 !important;
	color: var(--ds-muted-foreground) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .notification-container .notification-dismiss-button:hover {
	color: var(--ds-foreground) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .notification-container .notification-subject {
	align-items: flex-start !important;
	gap: 10px;
	padding: 0 !important;
	color: var(--ds-foreground);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .notification-container .notification-subject > .image {
	display: grid;
	place-items: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-muted);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .notification-container img.notification-icon {
	width: 18px !important;
	height: 18px !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .notification-container .notification-subject :is(.subject, .rich-text--wrapper) {
	padding: 6px 0 0 !important;
	font-weight: 500;
	line-height: 20px;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .notification-container .notification-message,
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .notification-container .notification-full-message {
	margin: 0 !important;
	padding-inline-start: 42px !important;
	color: var(--ds-muted-foreground);
	font-size: 13px;
	line-height: 1.6;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .notification-container .notification-overflow {
	box-shadow: 0 0 20px 20px var(--ds-popover) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .notification-container .notification-actions {
	margin: 6px 0 0 !important;
	padding-inline-start: 42px;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .notification-container .notification-actions .button-vue {
	min-height: 30px !important;
	margin: 2px !important;
	margin-inline: 0 6px !important;
	font-size: 13px;
}
/* actions («view conversation», «accept») as outline buttons: a solid black button on every card was too loud */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .notification-container .notification-actions .button-vue--vue-primary {
	border: 1px solid var(--ds-border) !important;
	background-color: transparent !important;
	color: var(--ds-foreground) !important;
	box-shadow: var(--ds-shadow-xs);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .notification-container .notification-actions .button-vue--vue-primary:hover {
	background-color: var(--ds-accent) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .notification-container .dismiss-all {
	padding: 4px !important;
	border-top: 1px solid var(--ds-border) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .notification-container .dismiss-all .button-vue {
	min-height: 32px !important;
	color: var(--ds-muted-foreground) !important;
	font-size: 13px;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .notification-container .dismiss-all .button-vue:hover {
	color: var(--ds-foreground) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #header .notification-container .dismiss-all .button-vue__text {
	font-weight: 500 !important;
}

/* ───────── Modals and dialogs (NcModal, NcDialog): shadcn dialog ───────── */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .modal-mask {
	background-color: rgba(0, 0, 0, 0.5) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .modal-container {
	background-color: var(--ds-background);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-xl) !important;
	box-shadow: var(--ds-shadow-xl) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .dialog__name {
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* ───────── Unified search: a command palette ─────────
 * Nextcloud: a fixed 80vh dialog with a big centred title, a floating label on the input border and loose result
 * rows. Here (shadcn Command): near the top, as tall as its content, a borderless search field with an icon, pill
 * filters, small muted group titles and compact rows.
 */
@media (min-width: 513px) {
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .modal-wrapper {
		align-items: flex-start;
	}
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .modal-container {
		width: min(640px, calc(100vw - 32px)) !important;
		height: auto !important;
		margin-top: 12vh;
	}
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .modal-container__content {
		max-height: min(620px, 76vh);
	}
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .modal-container {
	padding: 0 !important;
	overflow: hidden;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .modal-container__content {
	overflow: auto;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .modal-container__close {
	top: 6px !important;
	inset-inline-end: 6px !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .dialog__name {
	margin: 0 !important;
	padding: 12px 16px 0 52px;
	padding-inline: 16px 52px;
	min-height: 36px;
	box-sizing: border-box;
	color: var(--ds-muted-foreground);
	font-size: 13px;
	font-weight: 500;
	line-height: 24px;
	text-align: start;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .unified-search-modal__header {
	top: 0 !important;
	z-index: 1;
	padding: 0 !important;
	background-color: var(--ds-background) !important;
	border-block-end: 1px solid var(--ds-border);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .unified-search-modal__header .input-field {
	margin: 0 !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .unified-search-modal__header .input-field__main-wrapper {
	height: 48px !important;
	padding: 0 !important;
}
/* search icon (Lucide) at the start of the field */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .unified-search-modal__header .input-field__main-wrapper::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 50%;
	inset-inline-start: 16px;
	width: 18px;
	height: 18px;
	translate: 0 -50%;
	background-color: var(--ds-muted-foreground);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .unified-search-modal__header .input-field__input {
	height: 48px !important;
	padding-inline: 44px 16px !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	background: transparent !important;
	font-size: 15px;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .unified-search-modal__header .input-field__input::placeholder {
	color: var(--ds-muted-foreground);
	opacity: 1;
}
/* the label is the placeholder now (js/rayatheme-nav.js); kept for screen readers */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .unified-search-modal__header .input-field__label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .unified-search-modal__filters {
	gap: 6px !important;
	padding: 0 12px 10px !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .unified-search-modal__filters-applied {
	padding: 0 12px !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .unified-search-modal__filters-applied:not(:empty) {
	padding-block-end: 10px !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .unified-search-modal__filters .button-vue {
	--button-size: 28px;
	min-height: 28px !important;
	height: 28px;
	padding-inline: 4px 10px !important;
	border: 1px solid var(--ds-border) !important;
	border-radius: 999px !important;
	background-color: transparent !important;
	color: var(--ds-foreground) !important;
	font-size: 12.5px;
	font-weight: 500;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .unified-search-modal__filters .button-vue:hover {
	background-color: var(--ds-accent) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .unified-search-modal__filters .button-vue :is(.button-vue__icon, .material-design-icon) {
	width: 24px !important;
	min-width: 24px !important;
	height: 24px !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .unified-search-modal__filters .button-vue svg {
	width: 16px;
	height: 16px;
	color: var(--ds-muted-foreground);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .unified-search-modal__results {
	padding: 6px 8px 10px !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .unified-search-modal__results .result-title {
	margin: 10px 8px 4px !important;
	color: var(--ds-muted-foreground) !important;
	font-size: 12px !important;
	font-weight: 500;
	letter-spacing: 0;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .result-item {
	padding: 1px 0 !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .result-item :is(.list-item, a) {
	height: auto !important;
	min-height: 0 !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .result-item a {
	gap: 10px;
	padding: 6px 8px !important;
	border: 0 !important;
	border-radius: var(--ds-radius-md) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .result-item a:is(:hover, :focus, :focus-visible, :active) {
	border: 0 !important;
	background-color: var(--ds-accent) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .result-item a:focus-visible {
	box-shadow: inset 0 0 0 2px var(--ds-focus) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .result-item .list-item {
	padding: 0 !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .result-item__icon {
	width: 32px !important;
	height: 32px !important;
	border-radius: var(--ds-radius-sm) !important;
	background-size: 24px !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .result-item__icon--with-thumbnail:not(.result-item__icon--rounded) {
	border-color: var(--ds-border) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .result-item__icon--rounded {
	border-radius: 50% !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .result-item .list-item-content__name {
	font-weight: 500;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .result-item .list-item-content {
	padding: 0 !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .result-item .list-item-content__subname {
	color: var(--ds-muted-foreground);
	font-size: 12px;
}
/* Result icons that apps give as their black app-dark.svg (Gaam's issues): white in dark mode, like the icon classes. */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .result-item__icon:is([style*="/img/app-dark.svg"], [style*="/img/app-dark.png"]),
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .result-item img[src*="/img/app-dark.svg"] {
	filter: var(--background-invert-if-dark);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .unified-search-modal__results .result-footer {
	padding-inline: 4px;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .unified-search-modal__results .result-footer .button-vue {
	min-height: 32px !important;
	color: var(--ds-muted-foreground) !important;
	font-size: 12.5px;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .unified-search-modal__no-content {
	height: auto !important;
	margin: 0 !important;
	padding: 40px 16px 44px;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .unified-search-modal__no-content .empty-content {
	margin: 0 !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .unified-search-modal__no-content .empty-content__icon {
	width: 40px !important;
	height: 40px !important;
	margin-bottom: 8px !important;
	opacity: 0.45;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .unified-search-modal__no-content .empty-content__icon svg {
	width: 40px;
	height: 40px;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .unified-search-modal__no-content .empty-content__name {
	color: var(--ds-muted-foreground);
	font-size: 14px !important;
	font-weight: 500 !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .unified-search-modal-root .dialog__actions:empty {
	display: none;
}

/* ───────── Checkboxes, radios, switches (NcCheckboxRadioSwitch) ───────── */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .checkbox-radio-switch--button-variant {
	border-color: var(--ds-input) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .checkbox-radio-switch__content:hover,
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .checkbox-radio-switch__content:focus-within {
	background-color: var(--ds-accent);
}

/* ───────── Lists: files, list items, settings ───────── */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .files-list__row:hover,
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .files-list__row:focus-within {
	background-color: var(--ds-muted);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .files-list__row--active,
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .files-list__row--active:hover {
	background-color: var(--ds-accent-hover) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .files-list__thead th,
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .files-list__row-head {
	color: var(--ds-muted-foreground);
	font-weight: 500;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .list-item {
	border-radius: var(--ds-radius-md);
}
/* NcListItem active (user menu, Talk / Mail lists): accent instead of the inverted primary pill */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .list-item__wrapper--active .list-item,
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .list-item__wrapper--active .list-item:hover {
	background-color: var(--ds-accent) !important;
	color: var(--ds-accent-foreground) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .list-item__wrapper--active .list-item :is(.list-item__anchor, [class*="list-item-content__"], [class*="list-item-details__"], .line-one__name, .line-one__details, .line-two__subname) {
	color: var(--ds-accent-foreground) !important;
	font-weight: 600;
}

/* Settings navigation (server-rendered, core/css/apps.css) */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) :is(.app-navigation-personal, .app-navigation-administration) li:is(.active, :has(> a.active, > a.selected)),
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) :is(.app-navigation-personal, .app-navigation-administration) li:is(.active, :has(> a.active, > a.selected)) > a {
	background-color: var(--ds-sidebar-accent);
	color: var(--ds-sidebar-accent-foreground);
	font-weight: 600;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) :is(.app-navigation-personal, .app-navigation-administration) li:is(.active, :has(> a.active, > a.selected)) img {
	filter: var(--background-invert-if-dark);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) :is(.app-navigation-personal, .app-navigation-administration) li:not(.active) > a:hover {
	background-color: var(--ds-sidebar-accent-hover);
}

/* Settings sections (NcSettingsSection): cards separated by a hairline */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .settings-section:not(:last-child),
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #app-content > .section:not(:last-child) {
	border-bottom: 1px solid var(--ds-border);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .settings-section__name {
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* ───────── Dashboard widgets: shadcn cards ───────── */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #app-dashboard .panel {
	background-color: var(--ds-card) !important;
	color: var(--ds-card-foreground);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-xl) !important;
	box-shadow: var(--ds-shadow-sm);
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #app-dashboard > h2 {
	color: var(--ds-foreground) !important;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* ───────── Toasts (@nextcloud/dialogs, every app) ─────────
 * Nextcloud: top-right over the header and the (RTL) navigation, flush against the window edge, each as wide as its
 * text, the type only a thin coloured side border. Here, one style everywhere: centred just under the header, one
 * width so a stack lines up, a card faintly washed in the type's colour with a soft type icon at the start, a quiet
 * round close button at the end, undo as a small outline pill, an 8px slide-in.
 * Toastify's inline `top` offsets still do the stacking. App bundles can load @nextcloud/dialogs' styles after the
 * theme, hence the !important on position and size. The card is normal text flow with the icon and the close button
 * pinned at its edges (not flex): toasts can carry links and markup (Talk's TURN warning), and as flex items the text
 * and a link became two columns, the link squeezed to a letter per line.
 */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .toastify.dialogs {
	--ds-toast-tone: var(--ds-info);
	--ds-toast-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v-6'/%3E%3Cpath d='M12 7h.01'/%3E%3C/svg%3E");
	left: 0 !important;
	right: 0 !important;
	box-sizing: border-box;
	width: min(440px, calc(100vw - 32px)) !important;
	max-width: none !important;
	min-height: 52px;
	margin-inline: auto !important;
	display: block !important;
	padding: 14px 0 !important;
	padding-inline: 52px 46px !important;
	border: 1px solid color-mix(in oklab, var(--ds-toast-tone) 18%, var(--ds-border)) !important;
	border-radius: 14px !important;
	background: color-mix(in oklab, var(--ds-toast-tone) 4%, var(--ds-popover)) !important;
	color: var(--ds-popover-foreground) !important;
	overflow-wrap: anywhere;
	box-shadow: 0 8px 24px rgba(var(--ds-shadow-rgb), calc(var(--ds-shadow-a) * 1.5)), 0 2px 6px rgba(var(--ds-shadow-rgb), var(--ds-shadow-a)) !important;
	font-size: 14px !important;
	line-height: 1.55;
	text-align: start;
	transition: opacity 0.18s ease-out, translate 0.18s ease-out, transform 0.18s ease-out, top 0.18s ease-out !important;
}
/* entry: Toastify adds .on once the toast is placed */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .toastify.dialogs:not(.on) {
	translate: 0 -8px;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .toastify.dialogs:is(.toast-success) { --ds-toast-tone: var(--ds-success); --ds-toast-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .toastify.dialogs:is(.toast-error) { --ds-toast-tone: var(--ds-destructive); --ds-toast-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v7'/%3E%3Cpath d='M12 17.5h.01'/%3E%3C/svg%3E"); }
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .toastify.dialogs:is(.toast-warning) { --ds-toast-tone: var(--ds-warning); --ds-toast-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v7'/%3E%3Cpath d='M12 17.5h.01'/%3E%3C/svg%3E"); }
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .toastify.dialogs:is(.toast-undo) { --ds-toast-tone: var(--ds-muted-foreground); --ds-toast-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
/* type icon: a soft circle tinted with the type's colour, the glyph in the colour itself */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .toastify.dialogs::before {
	content: "";
	position: absolute;
	top: 50%;
	inset-inline-start: 12px;
	translate: 0 -50%;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: color-mix(in oklab, var(--ds-toast-tone) 14%, var(--ds-popover));
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .toastify.dialogs::after {
	content: "";
	position: absolute;
	top: 50%;
	inset-inline-start: 19px;
	width: 14px;
	height: 14px;
	translate: 0 -50%;
	background-color: var(--ds-toast-tone);
	-webkit-mask: var(--ds-toast-glyph) center / contain no-repeat;
	mask: var(--ds-toast-glyph) center / contain no-repeat;
	pointer-events: none;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .toastify.dialogs.toast-loading::after {
	display: none;
}
/* close: a round ghost button at the end */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .toastify.dialogs .toast-close {
	position: absolute !important;
	top: 50%;
	inset-inline-end: 10px;
	translate: 0 -50%;
	width: 28px !important;
	min-width: 28px !important;
	height: 28px !important;
	min-height: 28px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--ds-muted-foreground) !important;
	font-size: 0 !important;
	line-height: 0;
	opacity: 1 !important;
	cursor: pointer;
}
/* one drawn X instead of the «✖» character plus Nextcloud's own icon on top of it */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .toastify.dialogs .toast-close::before {
	content: "" !important;
	position: absolute;
	inset: 0;
	margin: auto;
	width: 14px !important;
	height: 14px !important;
	background: currentColor !important;
	background-image: none !important;
	/* Nextcloud's own icon is inverted in dark mode; this one follows the text colour */
	filter: none !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .toastify.dialogs .toast-close::after {
	display: none !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .toastify.dialogs .toast-close:is(:hover, :focus-visible) {
	background: var(--ds-accent) !important;
	color: var(--ds-foreground) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .toastify.dialogs .toast-close:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--ds-focus);
}
/* undo / action buttons: a small outline pill after the text */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .toastify.dialogs :is(.toast-undo-button, .toast-action-button, button:not(.toast-close)) {
	display: inline-block;
	vertical-align: middle;
	height: 28px;
	min-height: 28px !important;
	margin: -4px 0 !important;
	margin-inline-start: 8px !important;
	padding: 0 12px !important;
	border: 1px solid var(--ds-border-strong) !important;
	border-radius: 999px !important;
	background: var(--ds-popover) !important;
	color: var(--ds-foreground) !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 26px;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .toastify.dialogs :is(.toast-undo-button, .toast-action-button, button:not(.toast-close)):hover {
	background: var(--ds-accent) !important;
}
/* links inside a toast (Talk's TURN warning, «show details») */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .toastify.dialogs a {
	color: inherit !important;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
@media (max-width: 759px) {
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .toastify.dialogs {
		width: calc(100vw - 16px) !important;
	}
}
@media (prefers-reduced-motion: reduce) {
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .toastify.dialogs {
		transition: none !important;
		translate: none !important;
	}
}

/* ───────── Toasts of @nextcloud/dialogs 7 (Viewer, Zaman, Gaam, …) ─────────
 * Version 7 dropped Toastify: its toasts are CSS-module classes with a build hash, stacked in a container fixed at the
 * bottom of the navigation side, with a type border on the physical left. Matched by class prefix and given the same
 * look and place as the Toastify toasts above: centred under the header, one width, newest on top.
 * («_toast_» only appears on the cards; the container, message and buttons are «_toastContainer_», «_toastMessage_»…)
 */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_toastContainer_"] {
	top: calc(var(--header-height, 50px) + 8px) !important;
	bottom: auto !important;
	left: 0 !important;
	right: 0 !important;
	width: min(440px, calc(100vw - 32px));
	margin-inline: auto;
	padding: 0 !important;
	flex-direction: column-reverse !important;
	align-items: stretch !important;
	gap: 8px !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_toastContainer_"] [class*="_toast_"] {
	--ds-toast-tone: var(--ds-info);
	--ds-toast-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v-6'/%3E%3Cpath d='M12 7h.01'/%3E%3C/svg%3E");
	position: relative;
	box-sizing: border-box;
	min-width: 0 !important;
	min-height: 52px !important;
	gap: 12px;
	padding: 0 !important;
	padding-inline: 12px 10px !important;
	border: 1px solid color-mix(in oklab, var(--ds-toast-tone) 18%, var(--ds-border)) !important;
	border-radius: 14px !important;
	background: color-mix(in oklab, var(--ds-toast-tone) 4%, var(--ds-popover)) !important;
	color: var(--ds-popover-foreground) !important;
	box-shadow: 0 8px 24px rgba(var(--ds-shadow-rgb), calc(var(--ds-shadow-a) * 1.5)), 0 2px 6px rgba(var(--ds-shadow-rgb), var(--ds-shadow-a)) !important;
	font-size: 14px;
	line-height: 1.55;
	overflow-wrap: anywhere;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_toastContainer_"] [class*="_toast_"]:is([class*="_toast_success_"]) { --ds-toast-tone: var(--ds-success); --ds-toast-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_toastContainer_"] [class*="_toast_"]:is([class*="_toast_error_"]) { --ds-toast-tone: var(--ds-destructive); --ds-toast-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v7'/%3E%3Cpath d='M12 17.5h.01'/%3E%3C/svg%3E"); }
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_toastContainer_"] [class*="_toast_"]:is([class*="_toast_warning_"]) { --ds-toast-tone: var(--ds-warning); --ds-toast-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v7'/%3E%3Cpath d='M12 17.5h.01'/%3E%3C/svg%3E"); }
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_toastContainer_"] [class*="_toast_"]:is([class*="_toast_undo_"]) { --ds-toast-tone: var(--ds-muted-foreground); --ds-toast-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_toastContainer_"] [class*="_toast_"]::before {
	content: "";
	flex: 0 0 28px;
	order: -1;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: color-mix(in oklab, var(--ds-toast-tone) 14%, var(--ds-popover));
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_toastContainer_"] [class*="_toast_"]::after {
	content: "";
	position: absolute;
	top: 50%;
	inset-inline-start: 19px;
	width: 14px;
	height: 14px;
	translate: 0 -50%;
	background-color: var(--ds-toast-tone);
	-webkit-mask: var(--ds-toast-glyph) center / contain no-repeat;
	mask: var(--ds-toast-glyph) center / contain no-repeat;
	pointer-events: none;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_toastContainer_"] [class*="_toast_"]:is([class*="_toast_loading_"])::after {
	display: none;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_toastContainer_"] [class*="_toast_"] [class*="_toastMessage_"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 14px 0 !important;
	text-align: start;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_toastContainer_"] [class*="_toast_"] [class*="_toastMessage_"] a {
	color: inherit !important;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_toastContainer_"] [class*="_toast_"] :is([class*="_toastClose_"], [class*="_toastUndoButton_"], [class*="_toastLoader_"]) {
	margin: 0 !important;
}
/* close: the same 28px round ghost button */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_toastContainer_"] [class*="_toast_"] [class*="_toastClose_"] {
	--button-size: 28px !important;
	width: 28px !important;
	min-width: 28px !important;
	height: 28px !important;
	min-height: 28px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--ds-muted-foreground) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_toastContainer_"] [class*="_toast_"] [class*="_toastClose_"]:is(:hover, :focus-visible) {
	background: var(--ds-accent) !important;
	color: var(--ds-foreground) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_toastContainer_"] [class*="_toast_"] [class*="_toastClose_"] {
	align-self: center !important;
	display: grid !important;
	place-items: center;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_toastContainer_"] [class*="_toast_"] [class*="_toastClose_"] :is(.button-vue__wrapper, .button-vue__icon, .material-design-icon) {
	display: grid !important;
	place-items: center;
	width: 28px !important;
	min-width: 28px !important;
	height: 28px !important;
	margin: 0 !important;
	padding: 0 !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_toastContainer_"] [class*="_toast_"] [class*="_toastClose_"] svg {
	width: 16px !important;
	height: 16px !important;
}
/* undo: the small outline pill */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_toastContainer_"] [class*="_toast_"] [class*="_toastUndoButton_"] {
	--button-size: 28px !important;
	min-height: 28px !important;
	height: 28px !important;
	padding: 0 12px !important;
	border: 1px solid var(--ds-border-strong) !important;
	border-radius: 999px !important;
	background: var(--ds-popover) !important;
	color: var(--ds-foreground) !important;
	font-size: 13px;
	font-weight: 600;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_toastContainer_"] [class*="_toast_"] [class*="_toastUndoButton_"]:hover {
	background: var(--ds-accent) !important;
}
@media (max-width: 759px) {
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_toastContainer_"] {
		width: calc(100vw - 16px);
	}
}

/* ───────── Note cards (NcNoteCard): soft status surfaces ───────── */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .notecard {
	border-radius: var(--ds-radius-lg);
	border: 1px solid color-mix(in srgb, var(--note-theme, var(--ds-border)) 30%, transparent);
}

/* ───────── Tooltips (native title is untouched; v-tooltip / NcPopover tooltips) ───────── */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .v-popper--theme-tooltip .v-popper__inner {
	background-color: var(--ds-primary) !important;
	color: var(--ds-primary-foreground) !important;
	border-radius: var(--ds-radius-md) !important;
	font-size: var(--font-size-small);
	padding: 6px 10px !important;
}

/* ───────── Active navigation states: accent, not the primary pill ─────────
 * Apps colour the inside of an active entry with the primary variables (text, counters, and img icons
 * through `filter: var(--primary-invert-if-dark)`). Inside an active entry those variables now mean the
 * accent, so every app's own rules follow without per-app selectors.
 */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) :is(.app-navigation-entry.active, .list-item__wrapper--active, :is(.app-navigation-personal, .app-navigation-administration) li.active) {
	--color-primary-element: var(--ds-sidebar-accent);
	--color-primary-element-hover: var(--ds-sidebar-accent);
	--color-primary-element-text: var(--ds-sidebar-accent-foreground);
	--primary-invert-if-dark: var(--background-invert-if-dark);
	--primary-invert-if-bright: var(--background-invert-if-bright);
}

/* File picker («Move or copy», «Choose a file»): its navigation is a column of buttons, the current one primary */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .file-picker__navigation .button-vue {
	justify-content: flex-start;
	border-color: transparent;
	box-shadow: none;
	font-weight: 500;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .file-picker__navigation .button-vue--primary {
	background-color: var(--ds-sidebar-accent);
	color: var(--ds-sidebar-accent-foreground);
	font-weight: 600;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .file-picker__navigation .button-vue:not(.button-vue--primary):hover {
	background-color: var(--ds-sidebar-accent-hover);
}

/* ───────── Folder icons ─────────
 * Files colours folder icons with the primary colour: with a neutral primary that is a solid black (or white)
 * slab, worst in grid view. A quiet neutral reads as a folder; the share / link badge on it keeps its contrast.
 */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .files-list__row-icon,
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .folder-icon:not(:is(.app-navigation, #header, .button-vue, .action-item) *) {
	color: var(--ds-folder);
}

/* File names split into name + extension flex items read backwards in RTL («pdf.Brand guideline»), and forcing them
   LTR turned dates in Persian names around («جلسه 19-10-2026»). One inline run whose direction follows the name
   itself: English names read left to right, Persian ones right to left with their numbers intact. Used by the file
   picker and the recommended files above the list. Applies to every theme. */
body[data-themes] :is(.file-picker__name-container, .recommendation .file-name) {
	display: block !important;
	overflow: hidden;
	unicode-bidi: plaintext;
	text-align: start;
	text-overflow: ellipsis;
	white-space: nowrap;
}
body[data-themes] :is(.file-picker__name-container, .recommendation .file-name) > :not([class*="_file-picker__file-icon_"]) {
	display: inline !important;
	overflow: visible !important;
	unicode-bidi: normal !important;
}
body[data-themes] .file-picker__name-container > :is(.file-picker__file-name, .file-picker__file-extension) {
	margin: 0 !important;
	padding: 0 !important;
}
/* the picker's icon sits inside the same container: pinned at its start, the name runs beside it */
body[data-themes] .file-picker__name-container {
	position: relative;
	padding-inline-start: 40px;
	line-height: 32px;
}
body[data-themes] .file-picker__name-container > [class*="_file-picker__file-icon_"] {
	position: absolute !important;
	top: 50%;
	inset-inline-start: 0;
	translate: 0 -50%;
}
body[data-themes]:is([dir="rtl"], :lang(fa), :lang(ar), :lang(he), :lang(ur), :lang(ps), :lang(ug)) :is(.file-picker__name-container, .recommendation .file-name) {
	text-align: right;
}
/* Sizes are «< 1 KB» / «1.1 MB»: in RTL the «<» was mirrored into «>» («> ۱ KB», the opposite meaning) */
body[data-themes] :is(.files-list__row-size > span, [class*="_filesSidebarSubname_"] > span:first-of-type) {
	direction: ltr;
	unicode-bidi: isolate;
}

/* NcSelect menus in RTL: @nextcloud/vue gives the floating menu `inset-inline-start: 0`, which in RTL is `right: 0`
   and wins over the `left` the component computes, so every menu opened at the right edge of the page.
   A Nextcloud bug, fixed here for every theme. */
body[data-themes] .vs__dropdown-menu--floating:dir(rtl) {
	right: auto !important;
}

/* ───────── Segmented controls ─────────
 * Nextcloud's radio group in button style (NcRadioGroup, CSS-module classes with a build hash, so matched by
 * prefix): a muted track with the chosen option as a raised chip, the design system's tabs. Apps use the same
 * --ds-segment-* tokens for their own segmented controls (Zaman).
 */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_ncFormBox_row_"]:has(> [class*="_radioGroupButton_"]) {
	gap: 2px;
	padding: 3px;
	border-radius: var(--ds-radius-lg);
	background-color: var(--ds-segment-track);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_radioGroupButton_"][class*="_ncFormBox__item_"] {
	border: 1px solid transparent !important;
	border-radius: var(--ds-radius-md) !important;
	background-color: transparent !important;
	color: var(--ds-muted-foreground) !important;
	box-shadow: none;
	transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_radioGroupButton_"][class*="_ncFormBox__item_"]:hover {
	color: var(--ds-foreground) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_radioGroupButton_active_"][class*="_ncFormBox__item_"] {
	border-color: var(--ds-segment-active-border) !important;
	background-color: var(--ds-segment-active) !important;
	color: var(--ds-foreground) !important;
	box-shadow: var(--ds-segment-shadow);
	font-weight: 600;
}
/* The same for a choice built from buttons in a form box (Talk's «message list / bubbles»): the chosen one is the
   primary button, the others secondary. Only rows mixing both, so a row of ordinary actions is left alone. */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_ncFormBox_row_"]:has(> .button-vue--primary[class*="_ncFormBox__item_"]):has(> .button-vue--secondary[class*="_ncFormBox__item_"]) {
	gap: 2px;
	padding: 3px;
	border-radius: var(--ds-radius-lg);
	background-color: var(--ds-segment-track);
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_ncFormBox_row_"]:has(> .button-vue--primary[class*="_ncFormBox__item_"]):has(> .button-vue--secondary[class*="_ncFormBox__item_"]) > .button-vue {
	border: 1px solid transparent !important;
	border-radius: var(--ds-radius-md) !important;
	background-color: transparent !important;
	color: var(--ds-muted-foreground) !important;
	box-shadow: none !important;
	transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_ncFormBox_row_"]:has(> .button-vue--primary[class*="_ncFormBox__item_"]):has(> .button-vue--secondary[class*="_ncFormBox__item_"]) > .button-vue:hover {
	color: var(--ds-foreground) !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_ncFormBox_row_"]:has(> .button-vue--primary[class*="_ncFormBox__item_"]):has(> .button-vue--secondary[class*="_ncFormBox__item_"]) > .button-vue--primary.button-vue {
	border-color: var(--ds-segment-active-border) !important;
	background-color: var(--ds-segment-active) !important;
	color: var(--ds-foreground) !important;
	box-shadow: var(--ds-segment-shadow) !important;
	font-weight: 600;
}

/* Talk's picture editor (new conversation, conversation settings): preview, buttons and hint stacked and centred,
   instead of the preview and the controls 300px apart */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .avatar__container:has(> .avatar__preview) {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	height: auto !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .avatar__container > .avatar__preview {
	width: auto !important;
	padding: 0 !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .avatar__container > .avatar__controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: auto !important;
	text-align: center;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .avatar__container .avatar__warning {
	color: var(--ds-muted-foreground);
	font-size: 12px;
}

/* NcSelect in RTL: the component renders dir="auto", which takes its direction from the first strong character inside
   it, often hidden English text, so on Persian pages the value sat on the left and the arrow on the right. Selects now
   follow the page; each value / option keeps its own text direction (an English name still reads correctly).
   A Nextcloud bug, fixed for every theme. */
body[data-themes]:is([dir="rtl"], :lang(fa), :lang(ar), :lang(he), :lang(ur), :lang(ps), :lang(ug)) .v-select[dir="auto"] {
	direction: rtl;
}
body[data-themes]:is([dir="rtl"], :lang(fa), :lang(ar), :lang(he), :lang(ur), :lang(ps), :lang(ug)) .v-select[dir="auto"] :is(.vs__selected, .vs__search) {
	unicode-bidi: plaintext;
	text-align: right;
}
body[data-themes]:is([dir="rtl"], :lang(fa), :lang(ar), :lang(he), :lang(ur), :lang(ps), :lang(ug)) .vs__dropdown-menu {
	direction: rtl;
}
body[data-themes]:is([dir="rtl"], :lang(fa), :lang(ar), :lang(he), :lang(ur), :lang(ps), :lang(ug)) .vs__dropdown-option {
	text-align: right;
}
/* NcEllipsisedOption splits a label into two flex items (to keep its end visible when cut). Mixed Persian / Latin
   labels then come out scrambled: «هیچ / STARTTLS» showed as «هیچ / TARTTLSS». One inline run, ordered by the
   browser's bidi algorithm, cut at the end. */
body[data-themes]:is([dir="rtl"], :lang(fa), :lang(ar), :lang(he), :lang(ur), :lang(ps), :lang(ug)) .name-parts {
	display: block !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: pre;
}
body[data-themes]:is([dir="rtl"], :lang(fa), :lang(ar), :lang(he), :lang(ur), :lang(ps), :lang(ug)) .name-parts > * {
	display: inline !important;
	overflow: visible !important;
}

/* ───────── Space for the sidebar toggle ─────────
 * Apps keep ~40-60px free at the start of their content for Nextcloud's sidebar toggle button. On desktop the theme
 * hides that button (the divider collapses the sidebar), so headers sat ~50px in from the content edge while the rest
 * of the page did not: «جدید» and the breadcrumbs in Files, Talk's top bar and home heading, Photos, Activity, Apps.
 */
@media (min-width: 1025px) {
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]):has(.rt-nav-divider) .files-list__header {
		margin-inline-start: 8px !important;
	}
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]):has(.rt-nav-divider) .files-list__filters {
		padding-inline-start: 12px !important;
	}
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]):has(.rt-nav-divider) .top-bar > .top-bar__icon-wrapper:first-child {
		margin-inline-start: 4px !important;
	}
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]):has(.rt-nav-divider) .talk-dashboard__header {
		padding-inline-start: 0 !important;
	}
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]):has(.rt-nav-divider) .photos-navigation {
		padding-inline-start: 16px !important;
	}
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]):has(.rt-nav-divider) .timeline__file-list {
		padding-inline-start: 16px !important;
	}
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]):has(.rt-nav-divider) .app-settings-content__label {
		margin-inline-start: 12px !important;
	}
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]):has(.rt-nav-divider) .apps-list__toolbar {
		padding-inline-start: 12px !important;
	}
	/* Activity: the heading in the same centred column as the list under it */
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]):has(.rt-nav-divider) .activity-app__heading {
		box-sizing: border-box;
		width: 100%;
		max-width: 924px;
		margin-inline: auto !important;
		padding-inline: 12px;
	}
}

/* ───────── Centred things in RTL ─────────
 * Nextcloud and apps centre with «inset-inline-start: 50%; transform: translateX(-50%)». In RTL the first half turns
 * into right: 50% while the transform still moves left, so the element lands a whole width off centre: the camera /
 * microphone buttons in Talk's device check, legacy dialogs, centred popover menus, Mail's thread-header band.
 * Physical left: 50% centres in both directions. (The header's app-name tooltip has its own RTL fix in Nextcloud.)
 */
body[data-themes] .media-settings__toggles,
body[data-themes] .oc-dialog,
body[data-themes] #mail-thread-header::before,
body[data-themes] #header :is(#nextcloud, .header-menu button:first-of-type):focus-visible::after {
	left: 50% !important;
	right: auto !important;
}
body[data-themes] :is(.bubble, .app-navigation-entry-menu, .popovermenu).menu-center,
body[data-themes] :is(.bubble, .app-navigation-entry-menu, .popovermenu).menu-center::after {
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
}
/* Talk device check: the toggles inside the preview, not hanging over its bottom edge */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .media-settings__toggles {
	bottom: 12px !important;
	padding: 4px !important;
	border-radius: var(--ds-radius-lg) !important;
	box-shadow: var(--ds-shadow-md) !important;
}

/* ───────── Talk: call bar and chat ─────────
 * Call bar: three groups in a space-between row, so the media buttons drifted ~60px off centre (the side groups are
 * 34px and 157px wide). Now 1fr | auto | 1fr: the middle group sits in the centre of the call.
 * Chat: system messages («you started a call», «X joined», renames) and day separators were centred on the message
 * column, which leaves out the 48px avatar gutter, so they sat off centre; they now centre on the whole chat.
 */
@media (min-width: 769px) {
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container .bottom-bar {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
	}
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container .bottom-bar > :first-child {
		justify-self: start;
	}
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container .bottom-bar > :nth-child(2) {
		justify-self: center;
	}
	body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container .bottom-bar > :last-child {
		justify-self: end;
	}
}
/* «Waiting for others to join» did not wrap: on a phone it ran off both sides */
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .empty-call-view {
	box-sizing: border-box;
	padding-inline: 16px;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .empty-call-view :is(h2, p) {
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
	text-wrap: balance;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) li.wrapper--system {
	padding-inline-start: 0 !important;
}
body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) li.messages-date {
	grid-template-columns: minmax(0, 1fr) !important;
	margin-inline-start: 0 !important;
}

/* ───────── Fields in RTL ─────────
 * - Empty fields with dir="auto" (NcSelect's search, many app inputs) resolve to LTR, so a Persian placeholder ran
 *   left-to-right: its «…» ended up in front («...تعیین حساب»). While the placeholder shows, the field follows the page.
 * - Fields Nextcloud writes LTR (phone, e-mail, URL, numbers, dates, passwords, dir="ltr") started at the left edge of
 *   an RTL form. The typed value stays LTR but sits at the right, like every other field; the placeholder reads RTL.
 *   Low specificity (:where), so a field an app aligns on purpose (centred times) keeps its alignment.
 * - The text editor (Text app, Files README, Notes) aligned every paragraph left: each paragraph now takes its own
 *   direction, Persian at the right and English at the left.
 */
body[data-themes]:is([dir="rtl"], :lang(fa), :lang(ar), :lang(he), :lang(ur), :lang(ps), :lang(ug)) :is(input, textarea)[dir="auto"]:placeholder-shown,
body[data-themes]:is([dir="rtl"], :lang(fa), :lang(ar), :lang(he), :lang(ur), :lang(ps), :lang(ug)) .vs__search:placeholder-shown {
	direction: rtl;
	text-align: right;
}
:where(body[data-themes]:is([dir="rtl"], :lang(fa), :lang(ar), :lang(he), :lang(ur), :lang(ps), :lang(ug))) :is(input[type="tel"], input[type="email"], input[type="url"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="password"], input[dir="ltr"]) {
	text-align: right;
}
:where(body[data-themes]:is([dir="rtl"], :lang(fa), :lang(ar), :lang(he), :lang(ur), :lang(ps), :lang(ug))) :is(input[type="tel"], input[type="email"], input[type="url"], input[type="number"], input[type="password"], input[dir="ltr"]):placeholder-shown {
	direction: rtl;
}
body[data-themes]:is([dir="rtl"], :lang(fa), :lang(ar), :lang(he), :lang(ur), :lang(ps), :lang(ug)) .ProseMirror :is(p, h1, h2, h3, h4, h5, h6, li, blockquote, th, td, summary) {
	unicode-bidi: plaintext;
	text-align: start;
}

/* ───────── Light / dark switch in the header (js/rayatheme-mode.js) ─────────
 * The same 36px button as the header menus next to it; the icon is where a click takes you.
 */
body[data-themes] .rt-mode-toggle {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	min-height: 0;
	margin: 7px 2px;
	padding: 0;
	border: 0;
	border-radius: var(--ds-radius-md, var(--border-radius-element));
	background: transparent;
	color: var(--color-background-plain-text);
	cursor: pointer;
	transition: background-color 0.15s, scale 0.1s;
}
body[data-themes] .rt-mode-toggle[hidden] {
	display: none;
}
body[data-themes] .rt-mode-toggle:hover {
	background-color: var(--ds-sidebar-accent, var(--color-background-hover));
}
body[data-themes] .rt-mode-toggle:active {
	scale: 0.94;
}
body[data-themes] .rt-mode-toggle:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--ds-sidebar, var(--color-background-plain)), 0 0 0 4px var(--ds-focus, var(--color-main-text));
}
body[data-themes] .rt-mode-toggle svg {
	transition: rotate 0.3s ease;
}
body[data-themes] .rt-mode-toggle:hover svg {
	rotate: -15deg;
}
@media (prefers-reduced-motion: reduce) {
	body[data-themes] .rt-mode-toggle svg {
		transition: none;
	}
}