/* Halaman produksi di atas lembar halaman template (project-details.css, tree-and-sortable.css,
   orders.css, order-details.css, approvals.css, shifts.css). File ini hanya menyambungkan nilai
   yang di template ditulis lewat style inline oleh skripnya (panjang batang lewat share-N, urutan
   animasi lewat stagger-N, warna seri lewat tone-series-N), plus beberapa detail khas ERP.
   Warna hanya dari token --basalt-*, tanpa gaya inline dan tanpa !important. */

/* BoM: batang biaya, batang langkah routing, dan jeda animasi garis langkahnya. */
.pd-pace-fill[class*="share-"],
.pd-step-bar > [class*="share-"] {
	--pd-pct: var(--share);
}
.pd-step[class*="stagger-"] {
	--pd-trail-at: var(--i);
}
.pd-pace-row.pd-tone-5 {
	--pd-tone: var(--basalt-series-5);
}

/* Versi dan gemboknya di daftar BoM. */
.prd-version {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	white-space: nowrap;
}
.prd-lock {
	color: var(--basalt-warning);
}
.prd-warn {
	color: var(--basalt-warning);
}

/* Nomor urut operasi di ubin warna work center. */
.prd-seq {
	font-size: 0.8rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Pesan aturan bisnis di dalam kartu (BoM tanpa sub-assembly aktif, dan sejenisnya). */
.prd-alert {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	margin: 0 0 1.25rem;
	padding: 0.75rem 1rem;
	border: 1px solid color-mix(in srgb, var(--basalt-danger) 35%, var(--basalt-edge));
	border-radius: 10px;
	font-size: 0.875rem;
	color: var(--basalt-copy);
	background: color-mix(in srgb, var(--basalt-danger) 8%, var(--basalt-plane));

	& > .bi {
		margin-top: 0.1rem;
		color: var(--basalt-danger);
	}
}
.prd-table-note {
	margin: 0.75rem 0 0;
	font-size: 0.8rem;
	color: var(--erp-quiet);
}

/* Pohon BoM: simulasi di kiri (sepertiga) dan pohon di kanan mulai 1200px. */
@media (min-width: 1200px) {
	.prd-tree-grid .prd-tree-side {
		grid-column: span 4;
	}
	.prd-tree-grid .prd-tree-main {
		grid-column: span 8;
	}
}
.prd-sim-stock {
	display: flex;
	gap: 0.9rem;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 1.1rem 0 0;
	border: 0;
	border-top: 1px solid var(--basalt-edge);

	& legend {
		float: left;
		width: 100%;
		margin: 0;
	}
	& .erp-help {
		margin: 0;
	}
}
.prd-sim-label {
	font-weight: 500;
}
.prd-sim-actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	align-items: center;
}
.prd-tree-tags {
	display: inline-flex;
	gap: 0.35rem;
	flex-wrap: wrap;
	align-items: center;
	margin-left: 0.5rem;

	&:empty {
		display: none;
	}
}
.prd-tree-note {
	font-size: 0.75rem;
	color: var(--erp-quiet);
}

/* Nilai rupiah di batang biaya lebih lebar dari persen di template: kolomnya mengikuti isinya. */
.prd-pace .pd-pace-row {
	grid-template-columns: 5.5rem minmax(0, 1fr) auto;
}
.prd-pace .pd-pace-value {
	white-space: nowrap;
}

/* Daftar MO: letak titik di jalur (share-N) dan urutan animasinya (stagger-N memberi --i). */
.ords-belt-dot[class*="share-"] {
	--x: var(--share);
}
/* Warna ubin produk di laci ringkasan memakai seri yang tidak ada di daftar template. */
.ords-tone-5 {
	--stp-tone: var(--basalt-series-5);
}
.ords-tone-6 {
	--stp-tone: var(--basalt-series-6);
}
/* Chip filter dari server: tombol hapusnya berupa tautan, digaya seperti tombol template. */
.basalt-applied-chip a {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	color: var(--basalt-copy-body);
	text-decoration: none;

	&:hover {
		color: var(--basalt-copy);
		background: color-mix(in srgb, var(--basalt-copy) 10%, transparent);
	}
	&:focus-visible {
		outline: 2px solid var(--basalt-hue);
		outline-offset: 1px;
	}
}
/* Pilihan urutan di kalimat ringkasan daftar. */
.prd-sort {
	color: var(--ords-link, var(--basalt-hue));
	text-underline-offset: 3px;

	&.is-current {
		font-weight: 650;
		text-decoration: none;
		color: var(--basalt-copy);
	}
}
.prd-drawer-loading {
	padding: 2rem 0;
	text-align: center;
	color: var(--basalt-copy-muted);
}

/* Halaman MO: jumlah langkah dan jeda garisnya, warna ubin bahan dan produk. */
.od-steps[class*="value-"] {
	--od-count: var(--value);
}
.od-step[class*="stagger-"] {
	--od-trail-at: var(--i);
}
.od-product-icon[class*="tone-series-"],
.od-who-mark[class*="tone-series-"] {
	--od-tone: var(--tone);
}
/* Work order dan aktivitas selebar halaman di bawah kartu asal. */
@media (min-width: 992px) {
	.od-grid .prd-card-wo,
	.od-grid .prd-card-wide {
		grid-column: span 6;
	}
}
.prd-variance {
	font-weight: 650;

	&.is-over {
		color: var(--basalt-danger);
	}
	&.is-under {
		color: var(--basalt-success);
	}
}
.prd-wo-state {
	display: inline-flex;
	gap: 0.35rem;
	align-items: center;
	justify-content: flex-end;
}
.prd-children {
	display: flex;
	gap: 0.6rem;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;

	& li {
		display: flex;
		gap: 0.25rem 0.6rem;
		flex-wrap: wrap;
		align-items: center;
		font-size: 0.875rem;
	}
}

/* MRP: kotak qty di kolom jumlah, saran yang lewat tanggal pesan, dan pesan galat di dalam kartu. */
.prd-qty {
	flex-wrap: nowrap;
	width: 10.5rem;

	& .form-control {
		min-width: 4.5rem;
		text-align: right;
	}
}
.apv-table .apv-col-amount {
	width: 12rem;
}
.apv-wait.prd-wait-late {
	color: var(--basalt-danger);
}
.prd-alert-inset {
	margin: 0 var(--basalt-pad-x) 1rem;
}
.prd-th-sort {
	display: inline-flex;
	gap: 0.3rem;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

/* Jadwal produksi (papan shifts.html): garis "sekarang" (value-N), tanda hari (target-N), dan
   batang work order: letak (target-N), lebar (share-N), bagian selesai (value-N), baris tumpukan
   (stagger-N). Lajur memakai warna seri work center-nya. */
.prd-board[class*="value-"] {
	--at-now: calc(var(--value) / 100);
}
.prd-board-past::after,
.prd-board-past .at-board-tick-now {
	display: none;
}
.prd-board .at-board-tick[class*="target-"] {
	--at-x: calc(var(--target) * 1%);
}
.prd-board .at-board-tick:first-child,
.prd-board .at-board-tick:nth-last-child(2) {
	transform: translateX(-50%);
}
.prd-tick-off {
	opacity: 0.55;
}
.prd-tick-today {
	font-weight: 650;
	color: var(--basalt-copy);
}
.at-lane[class*="tone-series-"],
.at-shift[class*="tone-series-"] {
	--at-tone: var(--tone);
}
.at-lane-title {
	font-family: "Chivo Mono", monospace;
	font-size: 0.875rem;
}

/* Satu batang per hari di jalurnya (letak dari target-N, isi beban dari value-N); garis tipis
   memisahkan hari. Isinya nomor MO tiap work order, seperti wajah di batang shift template. */
.prd-track {
	align-self: stretch;
	min-height: 2.75rem;
	background-image: repeating-linear-gradient(
		to right,
		var(--basalt-edge) 0 1px,
		transparent 1px calc(100% / 7)
	);
}
.prd-bar {
	position: absolute;
	top: 0;
	left: calc(var(--target) * 1% + 2px);
	justify-content: center;
	width: calc(100% / 7 - 4px);
	padding: 0 0.25rem;
	--at-done: calc(var(--value, 0) * 1%);

	&.is-risk {
		box-shadow: inset 0 0 0 2px var(--basalt-danger);
	}
	&.is-over {
		--at-tone: var(--basalt-danger);
	}
	& .basalt-avatar {
		width: 26px;
		height: 26px;
		font-size: 0.6rem;
		font-variant-numeric: tabular-nums;
		text-decoration: none;
	}
	& .basalt-avatar.is-movable {
		cursor: grab;
		touch-action: none;
	}
	& .basalt-avatar.is-pinned {
		box-shadow: 0 0 0 2px var(--basalt-copy);
	}
	& .basalt-avatar.is-dragging {
		position: relative;
		z-index: 3;
		cursor: grabbing;
		transform: translateX(var(--prd-dx, 0px)) scale(1.15);
	}
}
.prd-day-count {
	display: none;
	position: relative;
	z-index: 2;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--basalt-copy);
}
@container at-board (max-width: 720px) {
	.prd-bar .at-lane-faces {
		display: none;
	}
	.prd-day-count {
		display: inline;
	}
}
.prd-load-high {
	font-weight: 650;
	color: var(--basalt-danger);
}
.prd-legend {
	align-items: center;
	font-size: 0.8rem;
	color: var(--at-quiet);

	& li {
		display: inline-flex;
		gap: 0.4rem;
		align-items: center;
	}
}
.prd-swatch-done {
	background: color-mix(in srgb, var(--basalt-series-1) 55%, var(--basalt-plane));
}
.prd-swatch-ahead {
	border: 1.5px dashed var(--basalt-edge-strong);
	background: transparent;
}
.prd-swatch-risk {
	box-shadow: inset 0 0 0 2px var(--basalt-danger);
	background: transparent;
}
.prd-risk-pill {
	margin-left: 0.35rem;
}
.at-table .basalt-row-actions form {
	display: inline-flex;
}

/* Ubin tahap di daftar MO berupa tautan penyaring, tanpa garis bawah. */
a.ords-flow-btn {
	text-decoration: none;
}
/* Di tabel sempit kolom work center disembunyikan template; kodenya pindah ke baris kedua nama. */
.prd-only-narrow {
	display: none;
}
@container at-list (max-width: 520px) {
	.prd-only-narrow {
		display: inline;
	}
}
@container at-list (max-width: 520px) {
	.at-table > tbody > tr > [data-at-cell="where"]::before {
		content: none;
	}
}
/* Status work order dan tanda MO berisiko boleh turun baris agar tabel tidak melebar. */
.at-table td[data-at-cell="status"] {
	white-space: normal;
}
.prd-risk-pill {
	margin-top: 0.25rem;
}
.at-table > tbody > tr > td:first-child {
	white-space: normal;
}