/*!
 * SaaS Experience Bridge — Token, reset, và quy tắc [hidden].
 *
 * File ĐẦU TIÊN trong chuỗi (xem public/ui/manifest.php): nó đặt biến màu mà
 * mọi file sau đọc, và quy tắc `[hidden]` mà mọi file sau có thể ghi đè nhầm.
 *
 * Widget nằm trong theme của site nên mọi thuộc tính hiển thị đều được đặt
 * tường minh (font, màu, viền, padding) để không phụ thuộc reset của theme.
 * Bảng màu mặc định là light; dark chỉ bật khi admin chọn.
 */

/* --------------------------------------------------------------------------
 * Tokens
 * ----------------------------------------------------------------------- */

.spe-entry,
.spe-modal {
	--spe-surface: #ffffff;
	--spe-surface-2: #f5f6f8;
	--spe-surface-3: #eceef2;
	--spe-ink: #0f1115;
	--spe-ink-2: #4b5563;
	--spe-muted: #6b7280;
	--spe-border: rgba(15, 17, 21, 0.11);
	--spe-border-strong: rgba(15, 17, 21, 0.2);

	/*
	 * --spe-accent là nền nút (có thể rất sáng, như tím pastel trong thiết kế).
	 * --spe-accent-strong dùng cho thanh dữ liệu, badge và focus ring: những chỗ
	 * cần tương phản với nền, nên phải tối hơn nền nút.
	 */
	--spe-accent: #c8a2f8;
	--spe-accent-ink: #1c1330;
	--spe-accent-strong: #7c3aed;
	--spe-accent-strong: color-mix(in oklab, var(--spe-accent) 66%, #000);
	--spe-accent-soft: rgba(124, 58, 237, 0.1);
	--spe-halo: rgba(124, 58, 237, 0.1);
	--spe-halo: color-mix(in oklab, var(--spe-accent) 22%, transparent);

	/*
	 * Xanh dương của liên kết, lấy từ bản mẫu. Tách khỏi --spe-accent vì accent
	 * là màu thương hiệu do admin đặt (có thể tím, cam…), còn đây là màu "đây
	 * là một liên kết mở ra ngoài" — hai việc khác nhau.
	 */
	--spe-link: #2662d9;

	--spe-good: #006300;
	--spe-critical: #d03b3b;
	--spe-warning: #8a5a00;
	--spe-warning-soft: rgba(250, 178, 25, 0.16);

	--spe-radius: 14px;
	--spe-radius-sm: 10px;
	--spe-radius-pill: 999px;
	--spe-shadow: 0 1px 2px rgba(15, 17, 21, 0.05), 0 8px 24px -12px rgba(15, 17, 21, 0.16);
	--spe-ring: 0 0 0 3px rgba(124, 58, 237, 0.28);

	box-sizing: border-box;
	color: var(--spe-ink);
	color-scheme: light;
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
}

.spe-entry {
	container-type: inline-size;
	margin-inline: auto;
	max-width: 760px;
	width: 100%;
}

.spe-entry[data-spe-scheme="dark"],
.spe-modal[data-spe-scheme="dark"] {
	--spe-surface: #17181b;
	--spe-surface-2: #1f2126;
	--spe-surface-3: #272a30;
	--spe-ink: #f4f5f7;
	--spe-ink-2: #c3c6cc;
	--spe-muted: #949aa4;
	--spe-border: rgba(255, 255, 255, 0.12);
	--spe-border-strong: rgba(255, 255, 255, 0.24);

	--spe-accent: #c8a2f8;
	--spe-accent-ink: #1c1330;
	/* Trên nền tối, accent sáng sẵn đã đủ tương phản — không tối thêm. */
	--spe-accent-strong: var(--spe-accent);
	--spe-accent-soft: rgba(200, 162, 248, 0.16);
	--spe-halo: rgba(255, 255, 255, 0.06);

	--spe-good: #0ca30c;
	--spe-critical: #ef6a6a;
	--spe-warning: #fab219;
	--spe-warning-soft: rgba(250, 178, 25, 0.14);
	/* Nền tối cần xanh sáng hơn mới đủ tương phản. */
	--spe-link: #7aa8f5;

	--spe-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px -14px rgba(0, 0, 0, 0.7);
	--spe-ring: 0 0 0 3px rgba(200, 162, 248, 0.3);

	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	.spe-entry[data-spe-scheme="auto"],
	.spe-modal[data-spe-scheme="auto"] {
		--spe-surface: #17181b;
		--spe-surface-2: #1f2126;
		--spe-surface-3: #272a30;
		--spe-ink: #f4f5f7;
		--spe-ink-2: #c3c6cc;
		--spe-muted: #949aa4;
		--spe-border: rgba(255, 255, 255, 0.12);
		--spe-border-strong: rgba(255, 255, 255, 0.24);

		--spe-accent: #c8a2f8;
		--spe-accent-ink: #1c1330;
		--spe-accent-strong: var(--spe-accent);
		--spe-accent-soft: rgba(200, 162, 248, 0.16);
		--spe-halo: rgba(255, 255, 255, 0.06);

		--spe-good: #0ca30c;
		--spe-critical: #ef6a6a;
		--spe-warning: #fab219;
		--spe-warning-soft: rgba(250, 178, 25, 0.14);
		--spe-link: #7aa8f5;

		--spe-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px -14px rgba(0, 0, 0, 0.7);
		--spe-ring: 0 0 0 3px rgba(200, 162, 248, 0.3);

		color-scheme: dark;
	}
}

.spe-entry *,
.spe-entry *::before,
.spe-entry *::after {
	box-sizing: inherit;
}

/*
 * Bắt buộc: nhiều thành phần bên dưới đặt display tường minh (inline-flex,
 * inline-block…) nên sẽ ghi đè `display: none` mặc định của [hidden].
 * Không có dòng này thì spinner và nút xoá luôn hiện.
 *
 * Phải kể cả .spe-modal: popup được chuyển ra thẳng <body> khi khởi động, nên
 * nó KHÔNG còn nằm trong .spe-entry — quy tắc chỉ phủ .spe-entry sẽ bỏ sót mọi
 * thứ trong popup, và đó là loại lỗi im lặng: JS bật `hidden` đúng, DOM đúng,
 * chỉ có màn hình là sai.
 */
.spe-entry [hidden],
.spe-modal [hidden],
.spe-modal[hidden] {
	display: none !important;
}

.spe-sr-only {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}