/* CnActionsBar — Reusable actions toolbar styles */

.cn-actions-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* Wrap the actions cluster below the search on narrow containers instead of
	   overflowing (clipping the Add button / Actions menu). */
	flex-wrap: wrap;
	gap: calc(2 * var(--default-grid-baseline));
	margin-bottom: calc(5 * var(--default-grid-baseline));
	padding: calc(2 * var(--default-grid-baseline));
	background: var(--color-background-hover);
	border-radius: var(--border-radius);
	/* Named inline-size container so the narrow-layout rules below respond to
	   the BAR's own width (page content minus nav/sidebar), not the viewport. */
	container: cn-actions-bar / inline-size;
}

.cn-actions-bar__info {
	font-weight: 500;
	font-size: var(--default-font-size);
	/* Let the search area grow to fill the row but shrink (min-width:0) so the
	   actions can stay beside it until there's genuinely no room, then wrap.
	   Flex row so `#after-search` controls (filter buttons) sit BESIDE the
	   search field — the left side groups "narrow what you see". */
	display: flex;
	align-items: center;
	gap: calc(2 * var(--default-grid-baseline));
	flex: 1 1 220px;
	min-width: 0;
}

.cn-actions-bar__count {
	color: var(--color-text-maxcontrast);
}

/* Inline search field */
.cn-actions-bar__search {
	position: relative;
	display: flex;
	align-items: center;
	/* Fill the (flexible) info area up to a comfortable cap; shrinks below it. */
	width: 100%;
	max-width: 320px;
}

.cn-actions-bar__search-icon {
	position: absolute;
	left: 12px;
	color: var(--color-text-maxcontrast);
	pointer-events: none;
	display: inline-flex;
}

/* Scoped under the search wrapper (specificity 0,2,0) + !important on the
   inline padding so NC core's global `input` rule can't reset the left inset
   and let the placeholder slide under the magnifier icon. */
.cn-actions-bar__search .cn-actions-bar__search-input {
	width: 100%;
	height: 40px;
	margin: 0;
	padding-block: 0;
	padding-inline: 38px 12px !important;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-pill);
	background: var(--color-main-background);
	font-size: var(--default-font-size);
	font-weight: 400;
}

.cn-actions-bar__view-toggle-icon {
	display: inline-flex;
}

/* Standalone sort control: a leading icon + a compact select, kept on one
   line (the visible "Sort by" label is dropped; it lives on the icon's
   aria-label and the combobox's accessible name instead). */
.cn-actions-bar__sort {
	display: flex;
	align-items: center;
	gap: 4px;
}

.cn-actions-bar__sort-icon {
	display: inline-flex;
	color: var(--color-text-maxcontrast);
}

.cn-actions-bar__sort .cn-actions-bar__sort-select {
	min-width: 140px;
}

.cn-actions-bar__actions {
	display: flex;
	align-items: center;
	/* Wrap the toggle / sort / add / overflow cluster onto a second line rather
	   than overflowing when the container is narrow. */
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: calc(2 * var(--default-grid-baseline));
}

.cn-actions-bar__actions .button-vue {
	/* fix issue when adding custom content, button gets squished when not needed */
	/* this is a quick and dirty fix and its possible that this will caused issue of its own when there are too many buttons */
	min-width: fit-content !important;
}

/* View mode toggle — segmented control with a sliding thumb.
   Styled entirely with Nextcloud CSS variables so any active theme (incl.
   the nldesign design systems) colours it automatically. The thumb is an
   absolutely-positioned pill that animates with `transform` between the two
   segments, giving the toggle its sliding feel. */
.cn-actions-bar__view-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	padding: 4px;
	border-radius: var(--border-radius-pill);
	background: var(--color-background-dark);
	/* Lives in the (shrinkable) left info group — never crush the segments;
	   the search field is the one that gives up width. */
	flex: 0 0 auto;
}

/* Scoped under the toggle (specificity 0,2,0) so it beats any stale copy of the
   PREVIOUS actions-bar.css that other apps may co-load on the same page. Older
   builds shipped `.cn-actions-bar__view-toggle span { max-height: 34px }`
   (specificity 0,1,1); since the thumb is a <span>, that rule would cap it at
   34px and break the vertical centring. `max-height: none` here overrides it.
   The inset top/bottom (not a calc'd height) keeps the thumb centred and 40px. */
.cn-actions-bar__view-toggle .cn-actions-bar__view-toggle-thumb {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 4px;
	width: calc(50% - 4px);
	max-height: none;
	border-radius: var(--border-radius-pill);
	background: var(--color-main-background);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
	transition: transform 0.25s ease;
	will-change: transform;
}

.cn-actions-bar__view-toggle-thumb--right,
.cn-actions-bar__view-toggle-thumb--pos-1 {
	transform: translateX(100%);
}

.cn-actions-bar__view-toggle-thumb--pos-2 {
	transform: translateX(200%);
}

/* Three-segment layout (Cards / Table / Map): the thumb shrinks to one third of
   the track so a single translateX(100%) step lands it exactly on the next
   segment. The two-segment default above (50% - 4px) is untouched. */
.cn-actions-bar__view-toggle--three .cn-actions-bar__view-toggle-thumb {
	width: calc((100% - 8px) / 3);
}

/* Segment buttons must shed Nextcloud core's global <button> chrome (server.css
   gives every button a tinted background, 1px border, rounded corners, box-shadow
   and a 3px margin). NC's selectors vary in specificity and some outrank a plain
   scoped class, so the chrome reset uses !important — a deliberate, contained
   reset against framework CSS. Without it the button backgrounds hide the sliding
   thumb and the 3px button margin inflates the track height. The old toggle got
   this for free from NcCheckboxRadioSwitch; raw buttons have to opt out. */
.cn-actions-bar__view-toggle .cn-actions-bar__view-toggle-btn {
	position: relative;
	z-index: 1;
	display: inline-flex;
	flex: 1 1 50%;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	min-height: 40px;
	margin: 0 !important;
	padding-block: 4px;
	/* Symmetric inline padding so the centred icon+label sit dead-centre in the
	   segment (and under the thumb). Asymmetric padding offsets the centring box. */
	padding-inline: 12px;
	appearance: none;
	-webkit-appearance: none;
	border: none !important;
	border-radius: var(--border-radius-pill) !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--color-text-maxcontrast);
	white-space: nowrap;
	font-size: 14px;
	font-weight: 500;
	line-height: 140%;
	cursor: pointer;
	transition: color 0.25s ease;
}

/* Neutralise Nextcloud's global button hover/focus (tint / border / shadow). */
.cn-actions-bar__view-toggle .cn-actions-bar__view-toggle-btn:hover,
.cn-actions-bar__view-toggle .cn-actions-bar__view-toggle-btn:focus,
.cn-actions-bar__view-toggle .cn-actions-bar__view-toggle-btn:active {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.cn-actions-bar__view-toggle .cn-actions-bar__view-toggle-btn:hover {
	color: var(--color-main-text);
}

.cn-actions-bar__view-toggle .cn-actions-bar__view-toggle-btn:focus-visible {
	outline: 2px solid var(--color-primary-element);
	outline-offset: -2px;
}

.cn-actions-bar__view-toggle .cn-actions-bar__view-toggle-btn--active {
	color: var(--color-main-text);
}

.cn-actions-bar__view-toggle-label {
	white-space: nowrap;
}

/* Contextual selection strip: its own full-width row inside the bar while a
   selection is active, primary-tinted so the selection mode reads as a
   distinct state (Proton Pass / Gmail / Files pattern). */
.cn-actions-bar__selection {
	flex: 1 1 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: calc(2 * var(--default-grid-baseline));
	padding: var(--default-grid-baseline) calc(2 * var(--default-grid-baseline));
	border-radius: var(--border-radius);
	background: var(--color-primary-element-light);
	color: var(--color-primary-element-light-text);
}

.cn-actions-bar__selection-count {
	font-weight: 600;
}

/* Clear sits at the far end of the strip. */
.cn-actions-bar__selection-clear {
	margin-inline-start: auto;
}

/* Visually-hidden live region (role="status") for the selection count —
   always present so assistive tech announces selection changes (WCAG 2.1
   SC 4.1.3 Status Messages). */
.cn-actions-bar__sr-status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Override Nextcloud's pointer-events:none on disabled action items
   so native title tooltip is visible on hover.
   The button's disabled attribute still prevents click events. */
.action.action--disabled {
	pointer-events: auto !important;
	cursor: not-allowed;
}

.action.action--disabled button {
	cursor: not-allowed;
}

/* Narrow-container layout (the bar is a named inline-size container;
   browsers without container-query support keep the default wrapping —
   functional, just less tidy).

   The MARKUP already groups by role at every width: the left info group
   holds the visual controls (search, #after-search filters, the view
   toggle), the right cluster the act controls (add, overflow) plus the
   standalone sort select — a display control kept on the right as legacy
   placement from before this split.
   Under ~900px of bar width — where wrapping becomes a real possibility —
   both groups flatten (`display: contents`) into the bar's own flex row
   so the controls wrap as individual items in that same role order, and
   every control grows to fill its row: on a break the view toggle stays
   with the search group and the act buttons drop to their own full-width
   row — no ragged right-aligned staircase. The view-toggle segments also
   go icon-only (labels stay in the accessibility tree) to keep one row
   viable longer. */
@container cn-actions-bar (max-width: 900px) {
	.cn-actions-bar__info,
	.cn-actions-bar__actions {
		display: contents;
	}

	/* #after-search filter buttons + the view toggle ride beside the
	   search field (DOM order — search first via its own order). */
	.cn-actions-bar__info > * {
		order: 1;
	}

	.cn-actions-bar__search {
		order: 0;
		flex: 1 1 200px;
		max-width: none;
	}

	.cn-actions-bar__actions > * {
		order: 2;
		flex: 1 1 auto;
	}

	/* On its own wrapped row the toggle may stretch (segments share the
	   width); the base no-shrink rule keeps it intact while inline. */
	.cn-actions-bar__view-toggle {
		flex: 1 1 auto;
	}

	/* The sort control's select grows with its row (the 140px floor stays
	   as the flex basis via min-width on the select itself). */
	.cn-actions-bar__sort .cn-actions-bar__sort-select {
		flex: 1 1 auto;
	}

	/* Visually hidden, NOT display:none — the label remains each segment
	   button's accessible name. */
	.cn-actions-bar__view-toggle-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* The flattened groups get explicit orders (0/1/2); keep the selection
	   strip after ALL of them so it stays the bar's last row. */
	.cn-actions-bar__selection {
		order: 3;
	}

	/* Narrow strip: Clear drops to its OWN row, flowing from the start — a
	   right-pinned control on a wrapped row reads as detached. The ::after
	   pseudo (order 1) is a full-width flex line-break between the bulk
	   actions (order 0, the default) and Clear (order 2). */
	.cn-actions-bar__selection::after {
		content: "";
		flex-basis: 100%;
		order: 1;
	}

	.cn-actions-bar__selection .cn-actions-bar__selection-clear {
		margin-inline-start: 0;
		order: 2;
	}
}