/*!
 * base.css — CRM Xuân Hương
 * Reset tối thiểu + nguyên tử dùng chung. Mọi selector nằm dưới .xh-app hoặc .xh-auth.
 *
 * NGOẠI LỆ SCOPE DUY NHẤT: .xh-icon-sprite — host sprite SVG nằm ngay đầu <body>,
 * không thể đặt trong .xh-app vì cả trang login lẫn trang app đều dùng chung.
 */

/* ------------------------------------------------------------------ *
 * Sprite host (ngoại lệ scope, một selector)
 * ------------------------------------------------------------------ */

.xh-icon-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

/* ------------------------------------------------------------------ *
 * Reset trong scope
 * ------------------------------------------------------------------ */

/*
 * ⚠️ ĐỪNG GỠ, và đừng hạ !important. Lỗi thật trên production 06/08/2026.
 *
 * Trình duyệt ẩn [hidden] bằng `display:none` ở tầng user-agent, độ ưu tiên (0,1,0).
 * Bất kỳ luật nào của mình đặt `display` với selector mạnh hơn — ví dụ
 * `.xh-app .xh-empty { display:flex }` (0,2,0) — đều ĐÈ MẤT nó, và `hidden` thành
 * thuộc tính vô nghĩa. Hậu quả đã thấy trên máy người dùng: khối "Không tìm thấy công
 * cụ phù hợp" hiện thường trực ngay dưới danh sách công cụ vẫn đang đầy đủ.
 *
 * Đây là lỗi hệ thống chứ không phải lỗi của riêng một component: mọi JS trong shell
 * đều bật/tắt bằng `el.hidden`. Một luật này chặn cả họ lỗi đó.
 *
 * Ngoại lệ duy nhất được phép ghi đè: `.xh-app.no-js .xh-account__panel[hidden]`
 * trong shell.css — nó cũng phải dùng !important, và có ghi rõ lý do tại chỗ.
 */
.xh-app [hidden],
.xh-auth [hidden] { display: none !important; }

.xh-app,
.xh-auth {
	font-family: "SVN Gilroy", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 22px;
	color: var(--xh-ink);
	background: var(--xh-app-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.xh-app *,
.xh-app *::before,
.xh-app *::after,
.xh-auth *,
.xh-auth *::before,
.xh-auth *::after {
	box-sizing: border-box;
}

/* Một weight duy nhất — chặn cả trường hợp trình duyệt tự làm đậm <b>/<strong>/<h*>. */
.xh-app h1, .xh-app h2, .xh-app h3, .xh-app h4, .xh-app h5, .xh-app h6,
.xh-app b, .xh-app strong, .xh-app th, .xh-app optgroup,
.xh-auth h1, .xh-auth h2, .xh-auth h3, .xh-auth h4, .xh-auth h5, .xh-auth h6,
.xh-auth b, .xh-auth strong, .xh-auth th, .xh-auth optgroup {
	font-weight: 500;
}

.xh-app h1, .xh-app h2, .xh-app h3, .xh-app h4, .xh-app h5, .xh-app h6,
.xh-app p, .xh-app figure, .xh-app blockquote, .xh-app dl, .xh-app dd,
.xh-auth h1, .xh-auth h2, .xh-auth h3, .xh-auth h4, .xh-auth h5, .xh-auth h6,
.xh-auth p, .xh-auth figure, .xh-auth blockquote, .xh-auth dl, .xh-auth dd {
	margin: 0;
}

.xh-app ul, .xh-app ol,
.xh-auth ul, .xh-auth ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.xh-app img, .xh-app svg,
.xh-auth img, .xh-auth svg {
	display: block;
	max-width: 100%;
}

.xh-app a,
.xh-auth a {
	color: var(--xh-primary);
	text-decoration: none;
}

.xh-app a:hover,
.xh-auth a:hover {
	text-decoration: underline;
}

.xh-app button, .xh-app input, .xh-app select, .xh-app textarea,
.xh-auth button, .xh-auth input, .xh-auth select, .xh-auth textarea {
	font: inherit;
	color: inherit;
	margin: 0;
}

.xh-app button,
.xh-auth button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.xh-app table,
.xh-auth table {
	border-collapse: collapse;
	width: 100%;
}

.xh-app hr,
.xh-auth hr {
	border: 0;
	border-top: 1px solid var(--xh-line);
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * Focus — A6. Ring dùng chung, KHÔNG bao giờ outline:none mà thiếu ring thay thế.
 * ------------------------------------------------------------------ */

.xh-app :focus-visible,
.xh-auth :focus-visible {
	outline: 2px solid transparent;   /* giữ chỗ cho chế độ tương phản cao của Windows */
	outline-offset: 2px;
	box-shadow: var(--xh-focus-ring);
	border-radius: var(--xh-r-sm);
}

/* ------------------------------------------------------------------ *
 * Icon — dùng với sprite: <svg class="xh-icon"><use href="#solar-…"></svg>
 * ------------------------------------------------------------------ */

.xh-app .xh-icon,
.xh-auth .xh-icon {
	display: inline-block;
	flex: none;
	width: 20px;
	height: 20px;
	color: inherit;
	fill: none;
	vertical-align: middle;
	pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * Tiện ích
 * ------------------------------------------------------------------ */

/* Ẩn khỏi mắt nhưng GIỮ trong cây accessibility — dùng cho nhãn của rail
   và cho vùng thông báo số kết quả tìm kiếm. Không dùng display:none. */
.xh-app .xh-sr-only,
.xh-auth .xh-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Bỏ qua nội dung — link đầu tiên của shell, chỉ hiện khi được focus. */
.xh-app .xh-skip-link,
.xh-auth .xh-skip-link {
	position: absolute;
	left: var(--xh-space-4);
	top: -100px;
	z-index: 100;
	padding: var(--xh-space-3) var(--xh-space-4);
	border-radius: var(--xh-r-sm);
	background: var(--xh-surface);
	color: var(--xh-ink);
	box-shadow: var(--xh-sh-md);
	text-decoration: none;
	transition: top .12s ease;
}

.xh-app .xh-skip-link:focus,
.xh-auth .xh-skip-link:focus {
	top: var(--xh-space-4);
}

/* Màu chữ — tách khỏi bậc typography để một bậc dùng được ở nhiều ngữ cảnh màu. */
.xh-app .xh-c-ink,       .xh-auth .xh-c-ink       { color: var(--xh-ink); }
.xh-app .xh-c-ink-2,     .xh-auth .xh-c-ink-2     { color: var(--xh-ink-2); }
.xh-app .xh-c-muted,     .xh-auth .xh-c-muted     { color: var(--xh-ink-muted); }
.xh-app .xh-c-primary,   .xh-auth .xh-c-primary   { color: var(--xh-primary); }
.xh-app .xh-c-danger,    .xh-auth .xh-c-danger    { color: var(--xh-danger); }
.xh-app .xh-c-success,   .xh-auth .xh-c-success   { color: var(--xh-success); }
.xh-app .xh-c-warning,   .xh-auth .xh-c-warning   { color: var(--xh-warning); }

.xh-app .xh-truncate,
.xh-auth .xh-truncate {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.xh-app .xh-stack,
.xh-auth .xh-stack {
	display: flex;
	flex-direction: column;
	gap: var(--xh-space-4);
}

.xh-app .xh-row,
.xh-auth .xh-row {
	display: flex;
	align-items: center;
	gap: var(--xh-space-3);
}

/* Thanh cuộn không được làm layout nhảy khi modal khoá cuộn body (Foundation §10). */
.xh-app,
.xh-auth {
	scrollbar-gutter: stable;
}

/* ------------------------------------------------------------------ *
 * Skeleton — Foundation §08: dùng skeleton, KHÔNG dùng spinner toàn trang.
 * ------------------------------------------------------------------ */

@keyframes xh-shimmer {
	from { background-position: -720px 0; }
	to   { background-position:  720px 0; }
}

.xh-app .xh-skeleton,
.xh-auth .xh-skeleton {
	background: linear-gradient(90deg, var(--xh-skel-a) 25%, var(--xh-skel-b) 37%, var(--xh-skel-a) 63%);
	background-size: 720px 100%;
	border-radius: var(--xh-r-sm);
	animation: xh-shimmer 1.4s linear infinite;
}

/* ------------------------------------------------------------------ *
 * prefers-reduced-motion — tắt mọi chuyển động, kể cả shimmer.
 * ------------------------------------------------------------------ */

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

	.xh-app *,
	.xh-app *::before,
	.xh-app *::after,
	.xh-auth *,
	.xh-auth *::before,
	.xh-auth *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.xh-app .xh-skeleton,
	.xh-auth .xh-skeleton {
		background: var(--xh-skel-a);
		animation: none;
	}
}