/*!
 * SaaS Experience Bridge — Nút và chip — dùng lại ở mọi nơi
 *
 * Một phần của giao diện Experience. Thứ tự nạp do public/ui/manifest.php quy
 * định và là RÀNG BUỘC: nhiều quy tắc dựa vào việc file sau ghi đè file trước
 * ở cùng độ đặc hiệu. Đảo thứ tự là đổi giao diện.
 */

/* --------------------------------------------------------------------------
 * Nút, chip
 * ----------------------------------------------------------------------- */

.spe-btn {
	align-items: center;
	appearance: none;
	border: 1px solid transparent;
	border-radius: var(--spe-radius-pill);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 0.5rem;
	justify-content: center;
	line-height: 1.2;
	padding: 0.72rem 1.5rem;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
	white-space: nowrap;
}

.spe-btn:focus-visible {
	box-shadow: var(--spe-ring);
	outline: none;
}

.spe-btn:active {
	transform: translateY(1px);
}

.spe-btn[disabled] {
	cursor: not-allowed;
	opacity: 0.55;
	transform: none;
}

/*
 * Nút đang gửi vẫn phải đọc được: nó là chỗ duy nhất nói việc gì đang xảy ra,
 * nên không mờ đi như một nút bị khoá thường.
 */
.spe-btn.is-sending[disabled] {
	cursor: progress;
	opacity: 1;
}

.spe-btn__icon {
	flex: none;
	height: 16px;
	margin-inline-start: -0.15rem;
	width: 16px;
}

/* Đang gửi: spinner đứng đúng chỗ icon, nút không nhảy rộng thêm. */
.spe-btn.is-sending .spe-btn__icon {
	display: none;
}

.spe-btn--primary {
	background: var(--spe-accent);
	color: var(--spe-accent-ink);
}

.spe-btn--primary:hover:not([disabled]) {
	filter: brightness(0.94);
}

.spe-btn--secondary {
	background: var(--spe-surface);
	border-color: var(--spe-border-strong);
	color: var(--spe-ink);
}

.spe-btn--secondary:hover:not([disabled]) {
	background: var(--spe-surface-2);
}

.spe-chip {
	appearance: none;
	background: var(--spe-surface-2);
	border: 1px solid var(--spe-border);
	border-radius: var(--spe-radius-pill);
	color: var(--spe-ink-2);
	cursor: pointer;
	font: inherit;
	font-size: 0.875rem;
	padding: 0.25rem 0.75rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.spe-chip:hover {
	background: var(--spe-surface-3);
	color: var(--spe-ink);
}

.spe-chip:focus-visible {
	box-shadow: var(--spe-ring);
	outline: none;
}

/* Trong lúc chờ dữ liệu, mọi lối gửi request đều bị khoá. */
.spe-chip[disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}

.spe-entry[data-spe-busy="1"] .spe-search__input {
	cursor: default;
}

.spe-form__hint {
	color: var(--spe-muted);
	font-size: 0.875rem;
	margin: 0.75rem 0 0;
	min-height: 1.35em;
	transition: color 0.15s ease;
}

/* Dòng tiến trình cập nhật mỗi giây; tabular-nums giữ số không nhảy ngang. */
.spe-entry[data-spe-busy="1"] .spe-form__hint {
	color: var(--spe-ink-2);
	font-variant-numeric: tabular-nums;
}

.spe-form__hint--error {
	color: var(--spe-critical);
}

.spe-examples {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
	margin: 0.5rem 0 0;
}

.spe-examples__label {
	color: var(--spe-muted);
	font-size: 0.875rem;
}

.spe-noscript {
	background: var(--spe-warning-soft);
	border-radius: var(--spe-radius-sm);
	color: var(--spe-ink);
	margin-top: 1rem;
	padding: 0.75rem 1rem;
}