/* Halaman pembelian dan penjualan di atas lembar halaman template (purchase-orders.css, quotes.css,
   quote-details.css, shipments.css, shipment-details.css, invoices.css, invoice-details.css).
   File ini hanya menyambungkan nilai yang di template ditulis lewat style inline oleh skripnya:
   warna seri (tone-series-N), panjang batang (share-N), dan jumlah langkah (value-N).
   Warna hanya dari token --basalt-*, tanpa gaya inline dan tanpa !important. */

/* Purchase Order */
.po-mono[class*="tone-series-"],
.po-tile[class*="tone-series-"],
.po-trip[class*="tone-series-"],
.po-spend-row[class*="tone-series-"] {
	--po-tone: var(--tone);
}
.po-trip-fill[class*="share-"],
.po-trip-van[class*="share-"],
.po-spend-bar > [class*="share-"],
.po-meter > [class*="share-"] {
	--po-pct: var(--share);
}
.po-steps[class*="value-"] {
	--po-count: var(--value);
}
.po-sort {
	color: inherit;
	text-decoration: none;
}
/* Stok bebas di bawah batas minimum, di baris formulir PO (template menandainya dari skrip). */
.po-low {
	font-weight: 600;
	color: var(--basalt-warning);
}

/* Pesan galat formulir di atas kartu. */
.trd-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);
	}
}

/* Sales Order: ubin tahap berupa tautan (template memakai radio), batang tenggat dan customer. */
a.qt-stage {
	text-decoration: none;
}
a.qt-stage[aria-current="page"] {
	border-color: var(--qt-stage);
	background: color-mix(in srgb, var(--qt-stage) 5%, var(--basalt-plane));
	box-shadow: 0 0 0 1px var(--qt-stage);

	.qt-stage-head {
		color: var(--basalt-copy);
	}
}
.qt-stage-spark .qt-spark-svg {
	width: 2.9rem;
}
.trd-note-late strong + * {
	color: var(--basalt-danger);
}
.qt-meter > [class*="share-"],
.qt-rep-bar > [class*="share-"] {
	width: var(--share);
}
.trd-th-sort {
	display: inline-flex;
	gap: 0.3rem;
	align-items: center;
	color: inherit;
	text-decoration: none;
}
.qt-chase-name {
	text-decoration: none;
}
.trd-pad {
	padding: 0 var(--basalt-pad-x) var(--basalt-pad-head);
}
.qt-pager-wrap,
.qt-empty-wrap {
	padding: 0 var(--basalt-pad-x) var(--basalt-pad-head);
}

/* Halaman SO: formulir draft membungkus dokumen tanpa mengubah grid dua kolomnya. */
.trd-doc-form {
	display: contents;
}
.qd-clock-fill[class*="value-"] {
	--qd-ring: var(--value);
}
.trd-price {
	flex-wrap: nowrap;
	min-width: 9.5rem;
	margin-left: auto;
}
.trd-date {
	min-width: 11rem;
}
.trd-line-progress {
	color: var(--basalt-copy-body);
}
.qd-version-n .bi {
	font-size: 0.95rem;
}

/* Pengiriman: ubin produk di isi pengiriman, dan daftar qty di laci "Kirim barang"
   (pola po-qty dari purchase-orders.html, yang lembarnya tidak dimuat di halaman ini). */
.trd-item-tile {
	display: inline-grid;
	place-items: center;
	font-size: 1.15rem;
	color: color-mix(in srgb, var(--tone) 62%, var(--basalt-copy));
	background: color-mix(in srgb, var(--tone) 15%, var(--basalt-plane));
}
.trd-qtys {
	margin: 0;
	padding: 0;
	list-style: none;
}
.trd-qty {
	display: flex;
	gap: 0.75rem 1rem;
	flex-wrap: wrap;
	align-items: center;
	padding: 1rem 0;
	border-top: 1px solid var(--basalt-edge);

	&:first-child {
		padding-top: 0;
		border-top: 0;
	}
	& .basalt-stepper {
		flex: none;
	}
}
.trd-qty-text {
	display: flex;
	gap: 0.25rem;
	flex-direction: column;
	flex: 1 1 12rem;
	min-width: 0;
}
.trd-qty-name {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 650;
	color: var(--basalt-copy);
}
.trd-qty-sub,
.trd-help,
.trd-after {
	font-size: 0.8rem;
	color: var(--basalt-copy-body);
}
.trd-after {
	margin: 0.5rem 0 0;
	font-weight: 600;
}
.trd-error {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	color: var(--basalt-danger);
}

/* Invoice: tinggi kolom umur tagihan (value-N), batang bayar (share-N), kolom berupa tautan. */
.ivs-aging-col[class*="value-"] {
	--ivs-h: calc(var(--value) / 100);
}
a.ivs-aging-col {
	text-decoration: none;
	color: inherit;
}
.ivc-progress-bar[class*="share-"] {
	--paid: var(--share);
}
.ivs-pager-wrap,
.shp-empty-wrap {
	padding: 0 0 1rem;
}
.shp-empty-wrap {
	padding: 0 var(--basalt-pad-x) var(--basalt-pad-head);
}
a.ivs-chip {
	text-decoration: none;
}
.qd-dates dt label {
	white-space: nowrap;
}
/* Ringkasan tagihan tidak boleh mendesak grafik umur ke tata letak sempitnya. */
@media (min-width: 1200px) {
	.ivs-owed-sum {
		max-width: 21rem;
	}
}
/* Bilah edit SO di layar sempit: tombolnya turun baris, tidak terpotong. */
.qd-editbar-actions {
	flex-wrap: wrap;
}
/* SO dalam mode edit di kertas sempit: template melipat kolom harga ke bawah nama produk, tetapi
   di sini harga adalah isian, jadi tiap baris menjadi kartu kecil: produk dan hapus, harga dan qty,
   lalu jumlahnya. */
@container (max-width: 600px) {
	.qd-doc.is-editing .qd-table thead {
		display: none;
	}
	.qd-doc.is-editing .qd-table,
	.qd-doc.is-editing .qd-table tbody {
		display: block;
	}
	.qd-doc.is-editing .qd-table tbody tr {
		display: grid;
		gap: 0.6rem 0.75rem;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "prod rm" "price qty" "amount amount";
		padding: 0.9rem 0;
		border-bottom: 1px solid var(--basalt-edge);

		& > td {
			display: block;
			padding: 0;
			border: 0;
		}
		& > td:first-child {
			grid-area: prod;
		}
		& > .qd-col-unit {
			display: block;
			grid-area: price;
		}
		& > .qd-col-qty {
			grid-area: qty;
		}
		& > .qd-col-total {
			grid-area: amount;
		}
		& > .qd-col-rm {
			grid-area: rm;
		}
	}
	.qd-doc.is-editing .trd-price {
		min-width: 0;
		margin-left: 0;
	}
}