/*!
 * SaaS Experience Bridge — Section: metric (KPI) và list (thanh độ lớn)
 *
 * 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.
 */

/* --------------------------------------------------------------------------
 * Section: metric (KPI row)
 * ----------------------------------------------------------------------- */

.spe-sections {
	display: grid;
	gap: 1.5rem;
}

/*
 * Grid item mặc định có min-width: auto, nên một section chứa bảng
 * `width: max-content` sẽ đẩy rộng cả cột grid và làm thẻ tràn ngang trên máy
 * hẹp. min-width: 0 cho phép section co lại và để bảng tự cuộn trong khung.
 */
.spe-sections > *,
.spe-kpis > *,
.spe-bar > * {
	min-width: 0;
}

.spe-section__title {
	color: var(--spe-ink-2);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

.spe-kpis {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.spe-kpi {
	background: var(--spe-surface);
	box-shadow: 0 0 0 1px var(--spe-border);
	display: grid;
	gap: 0.25rem;
	padding: 0.875rem 1rem;
}

.spe-kpi:first-child {
	border-start-start-radius: var(--spe-radius-sm);
	border-end-start-radius: var(--spe-radius-sm);
}

.spe-kpi:last-child {
	border-start-end-radius: var(--spe-radius-sm);
	border-end-end-radius: var(--spe-radius-sm);
}

.spe-kpi__label {
	color: var(--spe-muted);
	font-size: 0.8125rem;
	overflow-wrap: anywhere;
}

.spe-kpi__value {
	color: var(--spe-ink);
	font-size: 1.625rem;
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.spe-kpi__delta {
	align-items: center;
	display: inline-flex;
	font-size: 0.8125rem;
	font-weight: 600;
	gap: 0.25rem;
}

.spe-kpi__delta--up {
	color: var(--spe-good);
}

.spe-kpi__delta--down {
	color: var(--spe-critical);
}

.spe-kpi__delta--flat {
	color: var(--spe-muted);
}

.spe-kpi__hint {
	color: var(--spe-muted);
	font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
 * Section: list (magnitude — một hue duy nhất)
 * ----------------------------------------------------------------------- */

.spe-bars {
	display: grid;
	gap: 0.625rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.spe-bar {
	display: grid;
	gap: 0.25rem 0.75rem;
	grid-template-columns: minmax(0, 1fr) auto;
}

.spe-bar__label {
	color: var(--spe-ink);
	font-size: 0.9375rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.spe-bar__value {
	color: var(--spe-ink-2);
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.spe-bar__track {
	background: var(--spe-surface-2);
	border-radius: 4px;
	grid-column: 1 / -1;
	height: 8px;
	overflow: hidden;
}

.spe-bar__fill {
	background: var(--spe-accent-strong);
	border-radius: 4px;
	display: block;
	height: 100%;
	min-width: 2px;
}