/* ERP - Laporan varians biaya (budgets dan budget-details Basalt)
   Template menulis angka per elemen lewat style inline dari skripnya; di sini angka itu masuk
   lewat kelas bersama Basalt: panjang batang dan meter lewat share-N, garis standar di batang
   mini lewat target-N, dan warna produk lewat tone-series-N. Garis tanda di meter adalah biaya
   standar: meter mencakup 0 sampai 120% standar, jadi tandanya di 100/120. */

.bgt-page,
.bgt-drawer {
	--bgt-pace: 83.333%;
}
.bd-page {
	--bd-pace: 83.333%;
	--bd-tone: var(--basalt-series-1);
}

.bgt-tile[class*="tone-series-"],
.bgt-drawer[class*="tone-series-"] {
	--bgt-tone: var(--tone);
}
.bd-page[class*="tone-series-"] {
	--bd-tone: var(--tone);
}

.bgt-meter-fill[class*="share-"] {
	--bgt-used: var(--share);
}
.bd-meter-fill[class*="share-"] {
	--bd-used: var(--share);
}
.bgt-spark-bar[class*="share-"] {
	--bgt-h: var(--share);
}
.bgt-spark[class*="target-"] {
	--bgt-limit: calc(var(--target) * 1%);
}
.bgt-rank-bar span[class*="share-"] {
	--bgt-w: var(--share);
}
.bd-rank-bar span[class*="share-"] {
	--bd-w: var(--share);
}

/* Selisih: naik (lebih mahal) merah, turun (lebih hemat) hijau. */
.cv-up {
	color: color-mix(in srgb, var(--basalt-danger) 70%, var(--basalt-copy));
}
.cv-down {
	color: color-mix(in srgb, var(--basalt-success) 70%, var(--basalt-copy));
}
.bgt-rank-note.is-under {
	color: color-mix(in srgb, var(--basalt-success) 62%, var(--basalt-copy));
}
.bgt-rank-item.is-over .bgt-rank-note {
	color: color-mix(in srgb, var(--basalt-danger) 62%, var(--basalt-copy));
}

/* Pilihan periode di kepala halaman. */
.cv-period {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	margin: 0;
}

/* Empat angka di kartu periode, dua per baris: biaya aktual dan tiga komponennya. */
.bgt-year-figs.cv-figs {
	grid-template-columns: repeat(2, minmax(0, max-content));
}
.cv-figs .bgt-year-value {
	white-space: nowrap;
}

/* Halaman produk: saklar "lebih mahal saja" di atas tabel MO, dan catatan bahan di bawah batang. */
.cv-filter {
	margin: 1rem 0 0.5rem;
}
.cv-none {
	margin: 1rem 0 0;
}
.bd-rank-note {
	grid-column: 1 / -1;
	font-size: 0.77rem;
	color: var(--bd-quiet);
}
.bd-rank-note.is-over {
	color: color-mix(in srgb, var(--basalt-danger) 62%, var(--basalt-copy));
}
.bd-card-recent .basalt-pager {
	margin-top: 1rem;
}