/*
 * Global theme override for NcDateTimePicker's disabled calendar cells.
 * The underlying vue2-datepicker library ships hardcoded `#f3f3f3` / `#ccc`,
 * which breaks dark mode. The popup is portaled to <body>, so this must be
 * unscoped and lives here rather than in each modal that uses the picker.
 */
.mx-calendar-content .cell.disabled {
	background-color: var(--color-background-dark) !important;
	color: var(--color-text-maxcontrast) !important;
	cursor: not-allowed;
}

.mx-calendar-content .cell.disabled,
.mx-calendar-content .cell.disabled * {
	cursor: not-allowed !important;
}

.mx-calendar-content .cell.disabled:hover {
	background-color: var(--color-background-dark) !important;
}

/*
 * Buildiq edit button — brand orange, ALWAYS applied.
 * CnBuildiqEditButton styles its trigger orange via `<style scoped>`, but the
 * scoped `data-v-*` hash can miss the live element when the library is bundled
 * in duplicate in a consuming app (the trigger then falls back to the tertiary
 * transparent default and the button is intermittently not orange). These
 * unscoped globals guarantee the ADR-041 brand orange regardless of the hash.
 */
.cn-buildiq-edit__actions .button-vue,
.cn-buildiq-edit__actions .action-item__menutoggle {
	background-color: var(--c-orange-knvb, #f36c21) !important;
	color: #fff !important;
	border-radius: var(--border-radius-element, var(--border-radius-large, 8px));
}

.cn-buildiq-edit__actions .button-vue__wrapper {
	justify-content: center;
}

.cn-buildiq-edit__actions .button-vue__icon {
	display: flex !important;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.cn-buildiq-edit__glyph {
	color: #fff !important;
}

/*
 * KPI date-chip overlay — keep the headerless `title-meta` chip out of normal
 * flow so a compact flush stat tile never overflows its grid cell (which shows
 * an inner scrollbar). Same scoped-hash caveat as above: the scoped rule can
 * miss under duplicate bundling, so anchor it globally. `position: relative` on
 * the wrapper gives the absolute chip something to anchor to without moving any
 * content (no offsets on the wrapper itself).
 */
.cn-widget-wrapper {
	position: relative;
}

.cn-widget-wrapper__floating-meta {
	position: absolute;
	top: 8px;
	inset-inline-end: 10px;
	z-index: 2;
}

/*
 * KPI stat widget layout — same scoped-hash caveat as above. In a consuming app
 * that ends up with two compilations of the lib, the CnStatWidget `<style
 * scoped>` misses the live element and the card collapses to `display:inline`
 * with a full-width block icon band and a big empty void (looks broken). These
 * unscoped globals mirror the component's own scoped rules so the icon renders
 * as a small circle and the label/value/caption stack compactly regardless of
 * the data-v hash. Values are identical to CnStatWidget.vue.
 */
.cn-stat-widget {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 4px;
	min-height: 64px;
	min-width: 0;
	max-width: 100%;
}

.cn-stat-widget--linked {
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	border-radius: var(--border-radius-large, 8px);
	transition: background-color 0.1s ease-in-out;
}

.cn-stat-widget--linked:hover {
	background-color: var(--color-background-hover);
}

.cn-stat-widget__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
}

.cn-stat-widget__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cn-stat-widget__label {
	font-size: 0.95em;
	font-weight: 600;
	color: var(--color-main-text);
}

.cn-stat-widget__value-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.cn-stat-widget__value {
	font-size: 1.6em;
	font-weight: 700;
	line-height: 1.15;
	color: var(--color-primary-element);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cn-stat-widget__trend {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 0.85em;
	font-weight: 600;
}

.cn-stat-widget__caption {
	font-size: 0.85em;
	color: var(--color-text-maxcontrast);
}

/*
 * Modal / dialog stacking baseline.
 *
 * `@nextcloud/vue` v9 ships a flat `.modal-mask { z-index: 9998 }` in NcModal's
 * scoped stylesheet, which lands every dialog on the same layer. 9998 also sits
 * below Nextcloud chrome that apps expect a dialog to cover, so this baseline
 * lifts dialog masks clear of it — it is the value this library used to hardcode
 * as `!important` from inside CnEditDataModal's unscoped <style> block.
 *
 * It MUST NOT be `!important`. `src/utils/modalStack.js` writes a per-modal
 * layer as an inline `z-index` so the most recently opened modal receives
 * pointer events, and an `!important` baseline would beat that inline value —
 * flattening every open dialog back onto one layer, where the winner is decided
 * by DOM order between two nodes teleported to <body>. That race is what made
 * clicks on a nested dialog land on the dialog underneath it.
 *
 * Deliberately unscoped: the mask is teleported out of the component tree, so a
 * `data-v-*` scoped rule would never match it.
 */
.modal-mask.dialog__modal {
	z-index: 10005;
}

/*
 * NcSelect's dropdown, when it is inside a dialog.
 *
 * `NcSelect.appendToBody` defaults to TRUE, so vue-select teleports its menu
 * out of the dialog and makes it a `<body>` sibling — leaving the dialog's
 * stacking context entirely — and `@nextcloud/vue` gives that menu
 * `--vs-dropdown-z-index: 9999`.
 *
 * 9999 clears a STOCK NcModal mask, which sits at 9998. It does not clear the
 * baseline directly above: this library raises dialog masks to 10005 (and
 * `modalStack.js` writes 10005 + 5n inline for nested dialogs). So the dialog
 * paints over its own dropdown. The options render, they are visible, and every
 * click on them is swallowed by the mask — Playwright reports it as
 * "subtree intercepts pointer events", and a real user simply cannot pick an
 * option. Measured on pipelinq (#757).
 *
 * This is ours to fix, not upstream's: at @nextcloud/vue's own 9998 the
 * combination works, and it is THIS stylesheet that moved the mask above the
 * dropdown.
 *
 * `@nextcloud/vue` ships exactly this override for the timezone select inside
 * NcDateTimePicker — `.vs__dropdown-menu--floating { z-index: 100001 !important }`
 * — so this adopts the same selector and the same value rather than inventing a
 * layer. Do NOT rely on that upstream rule: it lives in NcDateTimePicker's own
 * stylesheet chunk, so an app gets it only if it happens to load that component's
 * CSS. That accident is why this bug looks intermittent across apps — and why the
 * rule belongs here, where every consumer of this library gets it.
 *
 * `!important` for the same reason upstream uses it: the value it must beat is
 * `.vs__dropdown-menu`'s own single-class rule, so without it the winner would
 * come down to stylesheet order — and a lazily-imported chunk can load after
 * this file. Unlike the mask baseline above, nothing writes an inline z-index on
 * this element, so `!important` here overrides no one.
 *
 * Scoped to the `--floating` variant deliberately: that is the appended-to-body
 * case. A dropdown left in the DOM stacks correctly inside its own dialog and
 * must not be lifted over unrelated chrome.
 */
.vs__dropdown-menu--floating {
	z-index: 100001 !important;
}

/*
 * vue-select's search input must not look like a second field.
 *
 * `NcSelect` wraps vue-select, whose `.vs__search` is the type-to-filter input
 * that sits BESIDE the selected value inside one control. Stock vue-select
 * gives it a transparent border; the LA SUITE theme sets
 *
 *     input[type="text"], input[type="search"], … {
 *         border: 1px solid var(--lasuite-color-gray-300) !important;
 *     }
 *
 * which lands on it and draws an empty bordered box to the right of the
 * selected value — a second, broken-looking field on every Provider, Agent and
 * Execution dropdown in the fleet.
 *
 * `!important` is REQUIRED here and not laziness: the theme's rule carries it,
 * so no amount of specificity can win. The override is narrow — `.vs__search`
 * is never a standalone input, always the inner field of a composite control —
 * so this cannot reach a real text box the theme meant to style.
 *
 * The root cause is the theme reaching into a composite control it does not
 * own; fixing it there would be better, and this stays until it does.
 *
 * Unscoped and here rather than in a component, because the control belongs to
 * @nextcloud/vue: no Conduction component owns the element, and each app
 * patching it locally is the same rule written sixteen times.
 *
 * Focus stays visible — see the rule below, which is the other half of this
 * patch and not optional.
 */
.v-select .vs__search,
.v-select .vs__search:focus {
	border: none !important;
	box-shadow: none !important;
	min-height: unset;
	background-color: transparent;
}

/*
 * ...and the focus indicator it removes goes back on the WHOLE control.
 *
 * `box-shadow: none` above does not just delete a border. Nextcloud draws input
 * focus WITH box-shadow, so suppressing it suppresses the focus indicator too,
 * and nothing else puts one back: core's global focus rule deliberately skips
 * Vue apps — `.content:not(#content-vue) :focus-visible`, commented "let vue
 * apps handle the focus themselves" — and the accessibility themes (high
 * contrast, dyslexia font) only swap colours and fonts. Deleting this rule is
 * therefore a WCAG 2.4.7 failure on every select in the fleet, which is exactly
 * what it does not look like from the diff.
 *
 * It rings `.vs__dropdown-toggle` rather than `.vs__search`, where it used to
 * live. The search input is the empty strip beside the selected value, so a ring
 * on it framed blank space — the second-field look this whole patch exists to
 * remove, redrawn in the focus colour. The toggle is what the user perceives as
 * the control, so that is what lights up.
 *
 * `.vs__search` must then have its own outline explicitly cleared: nothing in
 * vue-select or @nextcloud/vue suppresses it, so the user agent's default ring
 * would step straight into the vacancy and reinstate the box we just removed.
 * The indicator is not lost with it — `:focus-within` fires on the toggle
 * whenever that input is focused, which is the only way this control takes focus.
 *
 * `!important` because NcSelect sets `outline` on this same element at equal
 * specificity (`…:not(.vs--disabled, .vs--open) .vs__dropdown-toggle:focus-within`,
 * a background-coloured spacer ring). Equal specificity makes stylesheet order
 * the tie-breaker, and NcSelect's CSS is a lazily-imported chunk that can load
 * after this file — the same race the z-index patch above documents.
 *
 * `--color-main-text` and not the primary colour: NcSelect already uses it for
 * its own focus and open states, so a focused select reads as a Nextcloud
 * select rather than a Conduction one.
 */
.v-select .vs__dropdown-toggle:focus-within {
	outline: 2px solid var(--color-main-text) !important;
	outline-offset: 2px;
}

.v-select .vs__search:focus-visible {
	outline: none;
}
