/* Styles for the single-invoice view (invoice-details.html). Every class starts with
   invoice-; New Invoice loads this file too and reuses the paper sheet. */

/* The paper, the desk under it and its shadow change with the theme; the
   status hues are named by role so a palette can repaint them honestly. */
:root {
	--ivc-paper: #ffffff;
	--ivc-desk: color-mix(in srgb, var(--basalt-series-1) 5%, var(--basalt-canvas));
	--ivc-settled: var(--basalt-success);
	--ivc-pending: var(--basalt-warning);
	--ivc-problem: var(--basalt-danger);
	--ivc-brand: var(--basalt-series-1);
	--ivc-shadow: 0 1px 2px rgba(25, 20, 48, 0.06), 0 24px 60px -20px rgba(25, 20, 48, 0.22);
}
[data-bs-theme="dark"] {
	--ivc-paper: var(--basalt-plane);
	--ivc-desk: color-mix(in srgb, var(--basalt-series-1) 6%, var(--basalt-canvas));
	--ivc-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 60px -20px rgba(0, 0, 0, 0.7);
}

/* The summary band: who and what on the left, money in the middle, actions
   at the end; it drops to two columns on laptops and one on phones. */
.ivc-summary {
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
	align-items: center;
	margin-bottom: 1.5rem;
	padding: 1.35rem 1.5rem;
	border-radius: 18px;
	border: 1px solid var(--basalt-edge);
	background: var(--basalt-plane);

	@media (max-width: 1199.98px) {
		grid-template-columns: 1fr 1fr;
	}
	@media (max-width: 767.98px) {
		gap: 1.25rem;
		grid-template-columns: 1fr;
	}
}
.ivc-summary-back {
	display: inline-flex;
	gap: 0.3rem;
	align-items: center;
	margin-bottom: 0.3rem;
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--basalt-copy-muted);

	&:hover {
		color: var(--ivc-brand);
	}
}
.ivc-summary-title {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}
.ivc-summary-sub {
	margin: 0.2rem 0 0;
	font-size: 0.875rem;
	color: var(--basalt-copy-muted);
}

/* Status pills appear beside the title and in the list of sibling invoices. */
.ivc-pill {
	display: inline-flex;
	gap: 0.3rem;
	align-items: center;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	font-size: 0.71rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
	vertical-align: middle;
}
.ivc-pill-partial {
	color: color-mix(in srgb, var(--ivc-pending) 45%, var(--basalt-copy));
	background: color-mix(in srgb, var(--ivc-pending) 16%, transparent);
}
.ivc-pill-paid {
	/* Green leans toward the body copy so the small label keeps 4.5:1 on its tint. */
	color: color-mix(in srgb, var(--ivc-settled) 58%, var(--basalt-copy));
	background: color-mix(in srgb, var(--ivc-settled) 14%, transparent);
}
.ivc-pill-overdue,
.ivc-pill-void {
	color: var(--ivc-problem);
	background: color-mix(in srgb, var(--ivc-problem) 12%, transparent);
}

/* The balance reads large, with a bar that fills as payments arrive. */
.ivc-summary-due {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	margin-bottom: 0.5rem;
}
.ivc-summary-amount {
	font-size: clamp(1.35rem, 2vw, 1.6rem);
	font-weight: 750;
	line-height: 1;
	letter-spacing: -0.02em;
}
.ivc-summary-label {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--basalt-copy-muted);
}
.ivc-progress {
	height: 8px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--basalt-wash);
}
.ivc-progress-bar {
	display: block;
	width: var(--paid, 0%);
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(
		90deg,
		var(--ivc-settled),
		color-mix(in srgb, var(--ivc-settled) 60%, var(--basalt-series-3))
	);
	transition: width 500ms cubic-bezier(0.2, 0.8, 0.2, 1);

	:root[data-basalt-gradients="off"] & {
		background: var(--ivc-settled);
	}
	@media (prefers-reduced-motion: reduce) {
		transition: none;
	}
}
.ivc-summary-meta {
	display: flex;
	gap: 0.3rem 1rem;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 0.5rem;
	font-size: 0.8rem;
	color: var(--basalt-copy-muted);

	& strong {
		color: var(--basalt-copy);
	}
}
.ivc-summary-countdown {
	display: inline-flex;
	gap: 0.3rem;
	align-items: center;
	font-weight: 600;

	&.is-overdue {
		color: var(--ivc-problem);
	}
	&.is-paid {
		color: var(--ivc-settled);
	}
}

/* Actions sit at the far end and take a full row once the band wraps. */
.ivc-summary-actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;

	& .dropdown-item {
		font-size: 0.875rem;
	}
	@media (max-width: 1199.98px) {
		grid-column: 1 / -1;
	}
}
.ivc-toolbar {
	display: inline-flex;
	gap: 0.3rem;

	& .btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 38px;
		padding: 0;
	}
}

/* One column until 1200px, then the paper with a sticky side rail. */
.ivc-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: minmax(0, 1fr);

	@media (min-width: 1200px) {
		grid-template-columns: minmax(0, 1fr) 320px;
		align-items: start;
	}
}

/* The sheet lies on a tinted desk; its width drives the container queries below. */
.ivc-desk {
	padding: clamp(0.75rem, 3vw, 2.5rem);
	border-radius: 20px;
	background: var(--ivc-desk);
}
.ivc-paper {
	position: relative;
	container: ivc-paper / inline-size;
	max-width: 860px;
	margin: 0 auto;
	padding: clamp(1.5rem, 4vw, 3.25rem);
	border-radius: 6px;
	overflow: hidden;
	font-size: 0.9rem;
	color: var(--basalt-copy);
	background: var(--ivc-paper);
	box-shadow: var(--ivc-shadow);
}
.ivc-label {
	margin: 0 0 0.5rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--basalt-copy-muted);
}

/* Letterhead: the sender on the left, the word Invoice and its number on the right. */
.ivc-doc-header {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	justify-content: space-between;
	padding-bottom: 1.75rem;
	border-bottom: 2px solid var(--basalt-copy);

	@media (max-width: 575.98px) {
		flex-direction: column-reverse;
	}
}
.ivc-brand {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
}
.ivc-brand-mark {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--basalt-series-1), var(--basalt-series-3));

	& svg {
		width: 26px;
		height: 26px;
	}
	:root[data-basalt-gradients="off"] & {
		background: var(--basalt-series-1);
	}
}
.ivc-brand-name {
	display: block;
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.ivc-sender {
	margin: 0.25rem 0 0;
	font-style: normal;
	font-size: 0.8rem;
	line-height: 1.6;
	color: var(--basalt-copy-muted);
}
.ivc-doc-title {
	text-align: right;

	@media (max-width: 575.98px) {
		text-align: left;
	}
}
.ivc-doc-title-word {
	margin: 0;
	font-size: clamp(1.75rem, 3.5vw, 2.4rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}
.ivc-doc-title-num {
	margin: 0.4rem 0 0;
	font-weight: 700;
	color: var(--basalt-copy-muted);
}

/* Billed-to address beside a short list of dates and references. */
.ivc-facts {
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 1.75rem 0;

	@media (max-width: 575.98px) {
		gap: 1.25rem;
		grid-template-columns: 1fr;
	}
}
.ivc-billto {
	& p {
		margin: 0;
		line-height: 1.6;
		color: var(--basalt-copy-muted);
	}
	& .ivc-label {
		margin-bottom: 0.4rem;
		color: var(--basalt-copy-muted);
	}
	& .ivc-billto-name {
		margin-bottom: 0.1rem;
		font-size: 1.05rem;
		font-weight: 700;
		color: var(--basalt-copy);
	}
}
.ivc-meta {
	display: grid;
	gap: 0.3rem;
	min-width: 220px;
	margin: 0;

	& div {
		display: flex;
		gap: 1.5rem;
		justify-content: space-between;
	}
	& dt {
		font-weight: 500;
		color: var(--basalt-copy-muted);
	}
	& dd {
		margin: 0;
		font-weight: 600;
	}
}

/* The line items: a plain ruled table whose figures align right. */
.ivc-items {
	width: 100%;
	border-collapse: collapse;

	& th {
		padding: 0.6rem 0.75rem;
		border-bottom: 1px solid var(--basalt-edge);
		font-size: 0.71rem;
		font-weight: 700;
		letter-spacing: 0.035em;
		text-transform: uppercase;
		white-space: nowrap;
		color: color-mix(in srgb, var(--basalt-copy-muted) 62%, var(--basalt-copy));
	}
	& th:first-child,
	& td:first-child {
		padding-left: 0;
	}
	& th:last-child,
	& td:last-child {
		padding-right: 0.1rem;
	}
	& td {
		padding: 0.9rem 0.75rem;
		border-bottom: 1px solid var(--basalt-edge);
		white-space: nowrap;
		vertical-align: top;
	}
	& td:first-child {
		min-width: 180px;
		white-space: normal;
	}
	& td strong {
		display: block;
		font-weight: 600;
	}
	& td span {
		display: block;
		margin-top: 0.1rem;
		font-size: 0.8rem;
		color: var(--basalt-copy-muted);
	}
}
.ivc-items-num {
	text-align: right;
}

/* On a narrow sheet each line becomes a small block: item and amount on the
   first row, the description under the item, then period, quantity and unit
   price in one muted row. The query follows the paper, which the side rail
   squeezes on laptops, so no column ever slips off the page. */
@container ivc-paper (max-width: 599.98px) {
	.ivc-items {
		& thead {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			white-space: nowrap;
			clip-path: inset(50%);
		}
		&,
		& tbody {
			display: block;
		}
		& tr {
			display: grid;
			row-gap: 0.3rem;
			column-gap: 0.3rem;
			grid-template-columns: max-content max-content minmax(0, 1fr) auto;
			padding: 0.9rem 0;
			border-bottom: 1px solid var(--basalt-edge);
		}
		& td {
			display: block;
			padding: 0;
			border: 0;
		}
		& td:first-child {
			grid-column: 1 / 4;
			grid-row: 1;
			min-width: 0;
		}
		& td:nth-child(5) {
			grid-column: 4;
			grid-row: 1;
			padding-left: 1rem;
			font-weight: 600;
		}
		& td:nth-child(2),
		& td:nth-child(3),
		& td:nth-child(4) {
			grid-row: 2;
			font-size: 0.8rem;
			text-align: left;
			color: var(--basalt-copy-muted);
		}
		& td:nth-child(3)::before {
			content: "\00B7";
			margin-right: 0.3rem;
		}
		& td:nth-child(3)::after {
			content: " \00D7";
		}
	}
}

/* Under the table: the payment note and stamp on the left, the totals ladder on the right. */
.ivc-totals {
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
	align-items: start;
	padding: 1.5rem 0 2rem;

	@container ivc-paper (max-width: 599.98px) {
		grid-template-columns: 1fr;
	}
}
.ivc-totals-side {
	display: flex;
	gap: 2rem;
	flex-direction: column;
	align-items: flex-start;

	@container ivc-paper (max-width: 599.98px) {
		order: 2;
	}
}
.ivc-totals-note {
	position: relative;
	margin: 0;
	padding: 0.9rem 1rem;
	border-radius: 10px;
	font-size: 0.8rem;
	line-height: 1.55;
	color: color-mix(in srgb, var(--basalt-copy-muted) 75%, var(--basalt-copy));
	background: var(--basalt-canvas);

	&::before {
		content: "";
		position: absolute;
		top: 0.75rem;
		bottom: 0.75rem;
		left: 0;
		width: 3px;
		border-radius: 0 3px 3px 0;
		background: var(--ivc-brand);
	}
	& strong {
		color: var(--basalt-copy);
	}
}
.ivc-totals-list {
	margin: 0;

	& div {
		display: flex;
		gap: 1rem;
		justify-content: space-between;
		padding: 0.3rem 0;
	}
	& dt {
		font-weight: 500;
		color: var(--basalt-copy-muted);
	}
	& dd {
		margin: 0;
		font-weight: 600;
		white-space: nowrap;
	}
	& .is-total {
		margin-top: 0.3rem;
		padding-top: 0.65rem;
		border-top: 1px solid var(--basalt-edge);
	}
	& .is-total dt,
	& .is-total dd {
		font-weight: 700;
		color: var(--basalt-copy);
	}
	& .is-balance {
		margin-top: 0.5rem;
		padding: 0.75rem 0.9rem;
		border-radius: 10px;
		background: var(--basalt-copy);
	}
	& .is-balance dt,
	& .is-balance dd {
		font-weight: 800;
		color: var(--basalt-plane);
	}
	& .is-balance dd {
		font-size: 1.1rem;
	}
}

/* The rubber stamp lands in the open space beside the totals, never over
   text, and thumps down again whenever the status changes. */
.ivc-stamp {
	position: relative;
	transform: rotate(-12deg);
	align-self: center;
	margin: 0.5rem 0;
	padding: 0.3rem 1rem;
	border: 3px solid currentColor;
	border-radius: 8px;
	font-size: clamp(1rem, 2.2vw, 1.4rem);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.85;
	mix-blend-mode: multiply;
	pointer-events: none;
	animation: ivc-stamp-in 500ms cubic-bezier(0.3, 1.6, 0.5, 1) 400ms both;

	[data-bs-theme="dark"] & {
		mix-blend-mode: normal;
	}
	&::after {
		content: "";
		position: absolute;
		inset: 4px;
		border: 1px solid currentColor;
		border-radius: 4px;
		opacity: 0.5;
	}
	&.is-restamp {
		animation: ivc-stamp-in 500ms cubic-bezier(0.3, 1.6, 0.5, 1) both;
	}
}
.ivc-stamp-partial {
	color: var(--ivc-pending);
}
.ivc-stamp-paid {
	color: var(--ivc-settled);
}
.ivc-stamp-void {
	color: var(--ivc-problem);
}
@keyframes ivc-stamp-in {
	0% {
		transform: rotate(-12deg) scale(2.2);
		opacity: 0;
	}
	60% {
		transform: rotate(-12deg) scale(0.94);
		opacity: 0.9;
	}
	100% {
		transform: rotate(-12deg) scale(1);
		opacity: 0.85;
	}
}

/* A voided invoice keeps its letterhead crisp and fades the money parts. */
.ivc-paper.is-void {
	& .ivc-items,
	& .ivc-totals {
		opacity: 0.45;
	}
}

/* Foot of the sheet: how to pay, a signature and a dashed closing line. */
.ivc-payinfo {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding-top: 1.75rem;
	border-top: 1px solid var(--basalt-edge);
	font-size: 0.8rem;

	@media (max-width: 767.98px) {
		grid-template-columns: 1fr;
	}
	& p {
		margin: 0 0 0.6rem;
		line-height: 1.6;
		color: var(--basalt-copy-muted);
	}
	& p strong {
		color: var(--basalt-copy);
	}
}
.ivc-bank {
	display: grid;
	gap: 0.3rem;
	margin: 0;

	& div {
		display: flex;
		gap: 1rem;
	}
	& dt {
		flex-shrink: 0;
		width: 120px;
		font-weight: 500;
		color: var(--basalt-copy-muted);
	}
	& dd {
		margin: 0;
		font-weight: 600;
	}
}
.ivc-signature {
	margin-top: 1.5rem;
}
.ivc-signature-name {
	display: block;
	max-width: 240px;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--basalt-edge);
	font-family: "Brush Script MT", "Segoe Script", cursive;
	font-size: 1.6rem;
	line-height: 1.2;
}
.ivc-signature-meta {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.75rem;
	color: var(--basalt-copy-muted);
}
.ivc-paper-foot {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px dashed var(--basalt-edge);
	font-size: 0.8rem;
	text-align: center;
	color: var(--basalt-copy-muted);
}

/* The side rail stacks its panels and stays in view beside a long sheet. */
.ivc-side {
	display: flex;
	gap: 1rem;
	flex-direction: column;

	@media (min-width: 1200px) {
		position: sticky;
		top: calc(var(--basalt-header-h, 72px) + 1rem);
	}
}
.ivc-panel {
	padding: var(--basalt-pad-row-y) var(--basalt-pad-x);
	border-radius: 16px;
	border: 1px solid var(--basalt-edge);
	background: var(--basalt-plane);
}
.ivc-panel-title {
	margin: 0 0 0.85rem;
	font-size: var(--basalt-fs-card-title, 1.2rem);
	font-weight: 700;
	color: var(--basalt-copy);
}

/* History runs as a timeline: a dot per event, joined by a hairline. */
.ivc-log {
	margin: 0;
	padding: 0;
	list-style: none;

	& li {
		position: relative;
		display: flex;
		flex-direction: column;
		padding: 0 0 0.9rem 1.35rem;
		font-size: 0.84rem;
		font-weight: 500;
	}
	& li::before {
		content: "";
		position: absolute;
		top: 0.3rem;
		left: 0;
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: var(--basalt-edge);
		box-shadow: 0 0 0 3px var(--basalt-plane);
	}
	& li:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 0.95rem;
		bottom: 0.1rem;
		left: 4px;
		width: 1px;
		background: var(--basalt-edge);
	}
	& li.is-paid::before {
		background: var(--ivc-settled);
	}
	& li.is-view::before {
		background: var(--ivc-brand);
	}
	& li.is-void::before {
		background: var(--ivc-problem);
	}
	& li.is-new {
		animation: ivc-log-in 400ms ease-out;
	}
	& time {
		margin-top: 0.1rem;
		font-size: 0.75rem;
		font-weight: 400;
		color: var(--basalt-copy-muted);
	}
}
@keyframes ivc-log-in {
	from {
		transform: translateY(-6px);
		opacity: 0;
	}
}

/* Attachments: one ruled row per file, then a dashed drop target. */
.ivc-files {
	margin: 0 0 0.6rem;
	padding: 0;
	list-style: none;

	& li {
		display: flex;
		gap: 0.5rem;
		align-items: center;
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--basalt-edge);
		font-size: 0.8rem;
	}
	& li > .bi {
		color: var(--ivc-brand);
	}
}
.ivc-files-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ivc-files-size {
	font-size: 0.71rem;
	white-space: nowrap;
	color: var(--basalt-copy-muted);
}
.ivc-files-remove {
	padding: 0.1rem 0.25rem;
	border: 0;
	border-radius: 6px;
	line-height: 1;
	color: var(--basalt-copy-muted);
	background: none;

	&:hover {
		color: var(--ivc-problem);
		background: var(--basalt-wash);
	}
}
.ivc-drop {
	display: flex;
	gap: 0.4rem;
	align-items: center;
	justify-content: center;
	padding: 0.7rem;
	border-radius: 10px;
	border: 1px dashed color-mix(in srgb, var(--basalt-copy-muted) 45%, transparent);
	font-size: 0.8rem;
	color: var(--basalt-copy-muted);
	cursor: pointer;
	transition:
		border-color 170ms ease,
		background-color 170ms ease;

	& strong {
		color: color-mix(in srgb, var(--ivc-brand) 65%, var(--basalt-copy));
	}
	&:hover,
	&:focus-visible,
	&.is-drag {
		border-color: var(--ivc-brand);
		outline: none;
		background: color-mix(in srgb, var(--ivc-brand) 6%, transparent);
	}
}

/* Sibling invoices line up on fixed tracks, so every amount ends on one
   edge and every pill starts at one x, whatever word it holds. */
.ivc-related {
	margin: 0;
	padding: 0;
	list-style: none;

	& a {
		display: grid;
		gap: 0.75rem;
		grid-template-columns: minmax(0, 1fr) auto 4.75rem;
		align-items: center;
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--basalt-edge);
		font-size: 0.84rem;
		text-decoration: none;
		color: var(--basalt-copy);
	}
	& li:last-child a {
		border-bottom: 0;
	}
	& a span:first-child {
		font-weight: 600;
	}
	& .ivc-pill {
		justify-self: start;
	}
	& a:hover span:first-child {
		color: var(--ivc-brand);
	}
}

/* Dialogs use the page's hairlines and leave room between field rows. */
.ivc-modal {
	& .modal-header {
		border-bottom-color: var(--basalt-edge);
	}
	& .modal-footer {
		border-top-color: var(--basalt-edge);
	}
	& .modal-body > .row {
		--bs-gutter-y: 1.25rem;
	}
	& .form-label {
		font-size: 0.8rem;
		font-weight: 600;
	}
}
.whs-field {
	margin-bottom: 1.25rem;

	&:last-child {
		margin-bottom: 0;
	}
}

/* Toasts stack in the bottom-right corner, each with a colored edge for its kind. */
.ivc-toast-region {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 1090;
	display: flex;
	gap: 0.5rem;
	flex-direction: column;
	max-width: 340px;
}
.ivc-toast {
	position: relative;
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	padding: 0.7rem 0.85rem;
	border-radius: 10px;
	border: 1px solid var(--basalt-edge);
	font-size: 0.85rem;
	color: var(--basalt-copy);
	background: var(--basalt-plane);
	box-shadow: 0 10px 30px -12px rgba(25, 20, 48, 0.25);
	animation: ivc-toast-in 0.25s ease-out;

	&::before {
		content: "";
		position: absolute;
		top: 0.5rem;
		bottom: 0.5rem;
		left: -1px;
		width: 3px;
		border-radius: 0 3px 3px 0;
		background: var(--ivc-brand);
	}
	&.is-out {
		animation: ivc-toast-out 0.2s ease-in forwards;
	}
	& i {
		margin-top: 1px;
		font-size: 1.05rem;
		color: var(--ivc-brand);
	}
}
/* Info keeps the brand edge; done, warn and problem swap in their status hue. */
.ivc-toast-done {
	&::before {
		background: var(--ivc-settled);
	}
	& i {
		color: var(--ivc-settled);
	}
}
.ivc-toast-warn {
	&::before {
		background: var(--ivc-pending);
	}
	& i {
		color: var(--ivc-pending);
	}
}
.ivc-toast-problem {
	&::before {
		background: var(--ivc-problem);
	}
	& i {
		color: var(--ivc-problem);
	}
}
@keyframes ivc-toast-in {
	from {
		transform: translateY(8px);
		opacity: 0;
	}
}
@keyframes ivc-toast-out {
	to {
		transform: translateX(20px);
		opacity: 0;
	}
}

/* With reduced motion the stamp and new history rows simply appear. */
@media (prefers-reduced-motion: reduce) {
	.ivc-stamp,
	.ivc-stamp.is-restamp,
	.ivc-log li.is-new {
		animation: none;
	}
}

/* Printing leaves only the sheet. Every selector starts at body.basalt-doc
   so it outweighs the layout rules in basalt.css without !important. */
@media print {
	@page {
		margin: 12mm;
		size: A4;
	}
	html body.basalt-doc {
		min-height: 0;
		color: #000;
		background: #fff;
	}
	body.basalt-doc .basalt-mainmenu,
	body.basalt-doc .basalt-dim,
	body.basalt-doc .basalt-topbar,
	body.basalt-doc .basalt-pagefoot,
	body.basalt-doc .ivc-summary,
	body.basalt-doc .ivc-side,
	body.basalt-doc .ivc-toast-region,
	body.basalt-doc .modal,
	body.basalt-doc .modal-backdrop {
		display: none;
	}
	/* The frame slides when the sidebar moves; without the transition the
     capture never lands halfway through. */
	body.basalt-doc .basalt-frame {
		min-height: 0;
		margin-left: 0;
		transition: none;
	}
	body.basalt-doc .basalt-stage,
	body.basalt-doc [data-ivc-root] {
		padding: 0;
	}
	body.basalt-doc .ivc-grid {
		display: block;
	}
	body.basalt-doc .ivc-desk {
		padding: 0;
		background: none;
	}

	/* Spacing tightens so a typical invoice fits one A4 page, and the sheet
     keeps its columns even though A4 is as narrow as a phone layout. */
	body.basalt-doc .ivc-paper {
		max-width: none;
		padding: 0;
		font-size: 9pt;
		line-height: 1.4;
		color: #000;
		background: #fff;
		box-shadow: none;
	}
	body.basalt-doc .ivc-doc-header {
		padding-bottom: 0.75rem;
	}
	body.basalt-doc .ivc-facts {
		grid-template-columns: minmax(0, 1fr) auto;
		padding: 0.65rem 0;
	}
	body.basalt-doc .ivc-billto p,
	body.basalt-doc .ivc-payinfo p {
		line-height: 1.4;
	}
	body.basalt-doc .ivc-meta {
		gap: 0.1rem;
	}
	body.basalt-doc .ivc-items td {
		padding-top: 0.3rem;
		padding-bottom: 0.3rem;
	}
	body.basalt-doc .ivc-totals {
		gap: 1.5rem;
		grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
		padding: 0.75rem 0;
	}
	body.basalt-doc .ivc-totals-side {
		gap: 1rem;
		order: 0;
	}
	body.basalt-doc .ivc-totals-list div:not(.is-balance) {
		padding: 0.2rem 0;
	}
	body.basalt-doc .ivc-stamp {
		margin: 0;
		mix-blend-mode: normal;
		animation: none;
	}
	body.basalt-doc .ivc-payinfo {
		gap: 1.5rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding-top: 0.75rem;
	}
	body.basalt-doc .ivc-signature {
		margin-top: 0.5rem;
	}
	body.basalt-doc .ivc-paper-foot {
		margin-top: 0.75rem;
		padding-top: 0.5rem;
	}
	body.basalt-doc .ivc-paper a {
		text-decoration: none;
		color: inherit;
	}
	/* Browsers drop backgrounds in print unless told these ones matter. */
	.ivc-stamp,
	.ivc-totals-list .is-balance,
	.ivc-brand-mark {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}