style.postcss

/**
 * Style
 */
@import url(https://fonts.googleapis.com/css?family=Raleway:100);

:root {
	--heading-font: 'Helvetica Neue', Raleway, sans-serif;
	--body-font: 'Palatino Linotype', Palatino, serif;
}

* { margin:0; }

html {
	background: #9BA2B0;
	font-size: 14px;

	@media (max-width:950px) {
		& {
			font-size: 12px;
		}
	}

	@media (max-width:700px) {
		& {font-size: 11px; }
	}

	@media print {
		& { background: none; }
	}
}


body {
	text-align: center;
	padding: 1em;

	@media (max-width:600px) {
		& {
			width: auto;
			margin: 1em;
		}
	}
}

h1, h2, h3, h4, h5, h6, caption {
	font-family: var(--heading-font);
	font-weight: 300;
	line-height: 1.1;
}

h1 {
	font-size: 250%;
}

a {
	color:inherit;

	&:not(:hover) {
		text-decoration: none;
	}
}

body > header,
article.invoice {
	position: relative;
	margin: 1em auto;
	font: 100%/1.5 var(--body-font);
	hyphens: auto;
	text-align: left;
}

body > header {
	width: 64em;
	padding: 1em;
	color: white;
	border: 1px solid hsla(0,0%,100%,.2);
}

article.invoice {
	width: 43em;
	background: white;
}

button {
	cursor: pointer;
}

button.mv-add-invoice {
	font-size: 150%;
	margin-bottom: .5em;
	border: 0;
}

@media print {
	body > header {
		display: none;
	}
}

	header > address {
		& > h2 {
			font-style: normal;

			& img {
				float: left;
				margin: .3em .7em 0 0;
			}
		}
	}

	.online {
		float: right;
		text-align: right;

		& a {
			display: block;
			font-weight: bold;
		}
	}

.company {
	display: flex;

	& > img {
		margin-right: 1em;
	}

	& > div {
		flex: 1;
	}
}

address, [property=notes] {
	white-space: pre-line;
}

.show-all,
button.mv-add-invoice,
button.print {
	display: block;
	width: fit-content;
	padding: .5em 1em;
	margin: 1em auto;
	border-radius: .3em;
	background: white;
	font: bold 120%/1 var(--heading-font);

	@media print {
		& {
			display: none;
		}
	}

	&:hover {
		text-decoration: none;
		background: #f06;
		color: white;
	}
}

/* Invoice selected */
body.mv-target-within {
	& article.invoice:not(:target):not(.mv-target-within),
	& .mv-add-invoice {
		display: none;
	}

	/* Styles for selected invoice */
	& article.invoice {
		padding: 9em 9em 7em 13em;
		box-shadow: 1px 1px 5px 2px rgba(0,0,0,.3);

		@media print {
			& {
				padding: 4em 4em 0 8em;
				font-size: 10pt;
				box-shadow: none;
			}
		}

		& > header {
			padding-bottom: 1em;
			border-bottom: 1px solid black;

			& h1 {
				position: absolute;
				top: .6em;
				right: 18%;
				margin: -.5em 0 0 0;
				opacity: .3;
				font-size: 700%;
				font-weight: 100;
				white-space: nowrap;
				transform: translate(-7.7em, 1em) rotate(-90deg);
				transform-origin: top right;

				&::before {
					content: "Expense report "
				}

				@media print {
					& {
						opacity: .5;
						transform: translate(-6.7em, .3em) rotate(-90deg);
					}
				}
			}
		}

		& section,
		& article {
			margin: 3em 0 2em;
		}

		& table {
			width: 100%;
			margin-top: 1em;
			border-spacing: 0;

			& caption {
				text-align: left;
				margin-bottom: .5em;
			}

			& td {
				padding: .3em .5em .1em;

				&:first-child {
					min-width: 16ch;
				}
			}

			& td:last-child,
			& thead td,
			& tfoot td {
				font-weight: bold;
			}

			& thead td {
				background: #f06;
				color: white;
				border-bottom: 1px solid #f06;
			}

			& tbody > tr:nth-child(even) > td {
				background: #eee;
			}

			& tfoot td {
				border-top: 6px double #f06;

				&:first-child {
					text-align: right;
				}
			}

			& :is(tbody, tfoot) td:last-child {
				font-size: 150%;
				border-left: 1px dashed #f06;
			}

				& td > q {
					display: block;
					font-style: italic;
				}
		}
	}

	& .invoice-date {
		display: block;
		margin-top: .3em;
		text-align: right;
		font-size: 140%;
		font-style: italic;
		opacity: .6;

		& time {
			font-weight: bold;
		}

		&::before {
			content: "Date: "
		}
	}
}

/* No invoice selected, styles for listing */
body:not(.mv-target-within) {
	& .show-all {
		display: none;
	}

	& article.invoice {
		display: flex;
		width: 66em;
		margin: 2px auto;

		&.mv-deleted {
			padding: 1em;
			box-sizing: border-box;
			margin-bottom: .5em;
			margin-top: .5em;

			& .mv-close {
				margin-right: .5em;
				width: 1.4em;
			}
		}

		& .hide-on-summary,
		& .recipient:not(.has-recipient),
		& .trip:not(.has-trip),
		& .services h2,
		& .mv-add-services {
			display: none;
		}

		& header > a,
		& .invoice-date,
		& .recipient,
		& .trip {
			padding: .5em 1em;
		}

		& header {
			& > a {
				display: block;
				min-width: 4em;
				height: 100%;
				box-sizing: border-box;
				background: #f06;
				color: white;

				&:hover {
					background: hsl(80, 60%, 50%);
				}
			}

			& h1 {
				font-size: 150%;
				font-weight: bold;
			}
		}

		& .invoice-date {
			width: 10em;
		}

		& .services {
			margin-left: auto;
			background: hsl(220 10% 95%);
		}

		/* Total amount */
		& tfoot td:last-child {
			min-width: 3.8em;
			padding: .33em;
			font:100 320% var(--heading-font);
			text-align: left;
		}
	}
}

.trip,
.recipient {
	& .label {
		font-family: var(--heading-font);
		font-weight: 300;
	}

	& strong,
	& .recipient-info {
		display: block;
		font-size: 2rem;
		font-family: var(--body-font);
	}

	& strong {
		font-weight: 700;
	}
}



.label, caption {
	font-size: 1.5rem;
}

@media print {
	.recipient:not(.has-recipient),
	.trip:not(.has-trip),
	.hide-on-print {
		display: none;
	}
}

[mv-app]:not([mv-mode="edit"]) {
	& .recipient:not(.has-recipient),
	& .trip:not(.has-trip) {
		display: none;
	}
}

.change-data-source {
	background: hsl(220 10% 30%);
	color: white;
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 1em;
	text-align: left;

	& summary {
		font-family: var(--heading-font);
		font-size: 150%;
	}

	&[open] {
	}

	&:not([open]) {

	}

	& form {
		display: flex;
		gap: .3em;
		align-items: end;
		margin-top: .5em;

		& label {
			flex: 1;
		}

		& input {
			width: 100%;
			box-sizing: border-box;
		}
	}
}

/* No data source */
[mv-permissions="read"] {

}

button.print {
	position: absolute;
	top: 0;
	right: 1em;
	border: 1px solid hsl(220 10% 50% / .5);
	background: hsl(220 10% 95%);
}