/* ao-editquery.css - the Edit Query panel's annotation flow (Wave A5)
 *
 * SCOPE. The Add Synonym wizard opened from Annotation Mode:
 *
 *     webix_view webix_window vux-popup ao-vux-edit-query-add-synonymapp
 *     vux-cirrus-synonymapp-window ao-vux-app
 *
 * `ao-vux-edit-query-add-synonymapp` is unique to this app (unlike the three
 * editor popups, which share one class list and needed :has(.ace_editor) to tell
 * them apart), so the class alone is a safe discriminator.
 *
 * SPECIFICITY. This sheet is a static <link> in <head>; themes/css/index.css is
 * appended at RUNTIME by loadCss(), so it loads later and wins every
 * same-specificity tie. index.css carries 183 rules for
 * .ao-vux-edit-query-add-synonymapp and 113 for .ao-vux-pager, so every selector
 * here leads with the three-class prefix
 *
 *     .webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window
 *
 * which outranks them. This is the same lesson ao-modal-sourcing.css learned the
 * hard way - a two-class prefix quietly loses about half its declarations.
 *
 * Tokens come from ao-design-system.css, which is declared on BODY (never :root -
 * ThemeUtil.switchTheme() swaps body's class list and var() substitutes on the
 * declaring element). Every one carries a literal fallback, so the sheet degrades
 * to the light palette rather than to nothing.
 */

/* FOUR classes on the frame, not three. index.css carries
 *     .vux-popup.vux-cirrus-synonymapp-window.webix_window { border-radius: 24px }
 * at the same three-class specificity, and it loads later, so a three-class
 * prefix loses exactly two declarations here - the radius and the background -
 * and the result is a 24px window corner drawn around an 18px header corner.
 * Measured, not guessed: everything else in this rule won at three. */
.vux-popup.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window {
	/* --aoeq-edge doubles as the probe js/ao-editquery.js reads to decide the
	 * sheet is present. Renaming it without updating the script disables the fit. */
	--aoeq-edge: var(--ao-hairline, #dde5ee);
	--aoeq-ink: var(--ao-ink, #1e2429);
	--aoeq-quiet: var(--ao-mid, #5e7081);
	--aoeq-accent: var(--ao-primary-deep, #005bab);
	--aoeq-card: var(--ao-surface, #fff);

	background: var(--ao-field, #fff);
	border: 1px solid var(--aoeq-edge);
	border-radius: 18px;
	box-shadow:
		0 28px 68px -24px rgba(16, 24, 40, .38),
		var(--ao-elevation, 0 4px 14px rgba(0, 121, 225, .22));
	font-family: var(--ao-font, Inter, Roboto, sans-serif);
	color: var(--aoeq-ink);
	overflow: hidden;
}

/* The script publishes the centred position; see its header for why it cannot
 * simply write style.top - an app-level onResize restores the original. */
.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window[data-aoeq-fit] {
	top: var(--aoeq-top) !important;
	left: var(--aoeq-left) !important;
}

/* ---- header ---------------------------------------------------------- */

.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .webix_win_head {
	background: linear-gradient(180deg,
			var(--ao-primary-50, #f0f7fd) 0%,
			var(--ao-surface, #fff) 100%);
	border-bottom: 1px solid var(--aoeq-edge) !important;
	border-radius: 18px 18px 0 0;
}

.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .webix_win_head .webix_toolbar,
.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .webix_win_head .webix_scroll_cont,
.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .webix_win_head .webix_el_box {
	background: transparent;
}

/* the eyebrow, matching Edit Query's "SEMANTIC SQL / Edit Query" pairing */
.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .ao-vux-app-main-title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	width: auto;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.1px;
	color: var(--aoeq-ink);
}

.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .ao-vux-app-main-title::before {
	content: "Annotation";
	font-size: 9.5px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--aoeq-quiet);
}

.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .webix_win_head .action_icon .webix_icon {
	color: var(--aoeq-quiet);
	border-radius: 50%;
	transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .webix_win_head .action_icon .webix_icon_button:hover .webix_icon {
	color: var(--aoeq-accent);
	background: var(--ao-primary-40, #e8f2fc);
	box-shadow: 0 0 0 7px var(--ao-primary-40, #e8f2fc);
}

/* ---- the step pager -------------------------------------------------- */
/* addSynonymsProgressbarTemplate emits .ao-vux-pager > button.ao-vux-pager--item
 * and renders it INSIDE the header, between the title and the close icon.
 *
 * The pager's SHAPE is left to the app on purpose. index.css owns it at
 *     .ao-vux-edit-query-add-synonymapp .ao-vux-app-header .webix_template .ao-vux-pager--item
 * which is four classes and outranks anything reasonable this sheet can write;
 * an earlier draft restyled it here and every declaration lost silently. What it
 * paints - 36px circles, live-theme blue for the current step, pale for the ones
 * not reached yet - is already on-brand, so the only thing worth taking is the
 * OPAQUE WHITE both it and its `.header_icon` host paint over the header's
 * gradient, which cut a 327px notch out of it.
 */

.vux-popup.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .webix_win_head .header_icon,
.vux-popup.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .webix_win_head .ao-vux-pager {
	background: transparent;
}

/* ---- the "add X as a synonym for..." option cards -------------------- */
/* addAsSynonymOptionsDataviewTemplate emits
 *   main.editquerycontainer > section.editquerycontainer--title + div.editquerycontainer--discription */

.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .webix_dataview_item {
	border: none !important;
	padding: 5px 0;
	overflow: visible;
}

.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .editquerycontainer {
	display: block;
	height: 100%;
	box-sizing: border-box;
	padding: 14px 18px;
	background: var(--aoeq-card);
	border: 1px solid var(--aoeq-edge);
	border-radius: var(--ao-radius-card, 14px);
	transition:
		border-color .2s ease,
		box-shadow .25s var(--ao-ease, cubic-bezier(.2, .7, .3, 1)),
		transform .25s var(--ao-ease, cubic-bezier(.2, .7, .3, 1));
}

.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .webix_dataview_item:hover .editquerycontainer {
	border-color: var(--ao-primary-light, #7fb2e6);
	box-shadow: var(--ao-elevation, 0 4px 14px rgba(0, 121, 225, .22));
	transform: translateY(-1px);
}

.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .webix_dataview_item.webix_selected .editquerycontainer {
	border-color: var(--ao-primary, #0079e1);
	box-shadow: 0 0 0 1px var(--ao-primary, #0079e1) inset;
}

.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .editquerycontainer--title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -.1px;
	color: var(--aoeq-ink);
}

.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .editquerycontainer--title .webix_icon {
	color: var(--aoeq-accent);
}

/* the info glyph sits inside the title text, after the label */
.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .editquerycontainer--title .vuxicon-info {
	margin-left: 6px;
	color: var(--ao-dim, #94a3b1);
	font-size: 13px;
	transition: color .2s ease;
}

.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .editquerycontainer--title .vuxicon-info:hover {
	color: var(--aoeq-accent);
}

.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .editquerycontainer--discription {
	margin-top: 5px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--aoeq-quiet);
}

/* ---- footer ---------------------------------------------------------- */

.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .ao-vux-app-footer {
	background: linear-gradient(0deg,
			var(--ao-primary-50, #f0f7fd) 0%,
			var(--ao-surface, #fff) 100%) !important;
	border-top: 1px solid var(--aoeq-edge);
	border-radius: 0 0 18px 18px;
}

.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .ao-vux-app-footer .webix_view,
.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .ao-vux-app-footer .webix_el_box {
	background: transparent;
}

.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .ao-vux-app-footer .webix_el_button .webix_button {
	border-radius: var(--ao-radius-pill, 26px);
	font-family: var(--ao-font, Inter, Roboto, sans-serif);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .2px;
	transition:
		background-color .2s ease,
		border-color .2s ease,
		color .2s ease,
		box-shadow .25s var(--ao-ease, cubic-bezier(.2, .7, .3, 1)),
		transform .25s var(--ao-ease, cubic-bezier(.2, .7, .3, 1));
}

.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .ao-vux-app-footer .vux-cancel .webix_button {
	background: transparent;
	color: var(--aoeq-quiet);
	border: 1px solid var(--aoeq-edge);
}

.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .ao-vux-app-footer .vux-cancel .webix_button:hover {
	color: var(--aoeq-ink);
	border-color: var(--ao-primary-light, #7fb2e6);
	background: var(--ao-primary-40, #e8f2fc);
	transform: translateY(-1px);
}

.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .ao-vux-app-footer .vux-submit .webix_button {
	background: var(--ao-primary, #0079e1);
	color: var(--vux-btn-text-500, #fff);
	border: 1px solid transparent;
	box-shadow: var(--ao-elevation, 0 4px 14px rgba(0, 121, 225, .22));
}

.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .ao-vux-app-footer .vux-submit .webix_button:hover {
	background: var(--ao-primary-deep, #005bab);
	transform: translateY(-1px);
}

.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .ao-vux-app-footer .webix_disabled_view .webix_button,
.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .ao-vux-app-footer .webix_button[disabled] {
	box-shadow: none;
	transform: none;
}

/* ---- reduced motion -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .editquerycontainer,
	.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .ao-vux-pager--item,
	.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .ao-vux-app-footer .webix_el_button .webix_button {
		transition: none;
	}

	.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .webix_dataview_item:hover .editquerycontainer,
	.webix_window.ao-vux-edit-query-add-synonymapp.vux-cirrus-synonymapp-window .ao-vux-app-footer .webix_el_button .webix_button:hover {
		transform: none;
	}
}