/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.15;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img, svg {
	display: block;
}
ol, ul {
	list-style: none;
}
hr {
	width: 100%;
}
* {
	box-sizing: border-box;
}
em {
	font-style: italic;
}

:root {
	--color-blue-dark: #8484ff;
	--color-blue-darker: #6969ff;
	--color-blue-light: aliceblue;
	--color-white: white;
	--color-black: black;
	--color-gray-light: #eee;
	--color-gray-dark: #444;
}

body {
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-family: sans-serif;
}

a {
	color: inherit;
}

textarea, input {
	font-family: inherit;
	font-size: inherit;
}
textarea {
	resize: none;
}

.hover-underline {
	text-decoration: none;
}
.hover-underline:hover {
	text-decoration: underline;
}
.cursor-pointer { cursor: pointer; }

.container {
	margin-left: auto;
	margin-right: auto;
	max-width: 640px;
	padding: 0 1rem;
}

.relative { position: relative; }

.block { display: block; }
.inline-block { display: inline-block; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }
.grow { flex-grow: 1; }
.gaphalf { gap: 0.5rem; }
.gap1 { gap: 1rem; }
.gap2 { gap: 2rem; }

.w-full { width: 100%; }

.mb1 { margin-bottom: 1em; }
.mb2 { margin-bottom: 2em; }
.mb3 { margin-bottom: 3em; }

.mt1 { margin-top: 1em; }
.mt2 { margin-top: 2em; }
.mt3 { margin-top: 3em; }

.mr1 { margin-right: 1em; }
.mr2 { margin-right: 2em; }
.mr3 { margin-right: 3em; }

.pb1 { padding-bottom: 1em; }
.pb2 { padding-bottom: 2em; }
.pb3 { padding-bottom: 3em; }

.text-center { text-align: center; }
.text-right { text-align: right; }

.text-gray-light { color: var(--color-gray-light); }
.text-gray-dark { color: var(--color-gray-dark); }

.text-tiny { font-size: 0.6rem; }
.text-small { font-size: 0.8rem; }
.text-medium { font-weight: bold; }
.text-large { font-size: 2rem; }
.bold { font-weight: bold; }
.italic { font-style: italic; }

.border-dotted { border-bottom: 1px dotted var(--color-gray-dark); }

.o-0 { opacity: 0; }
.hidden { visibility: hidden; }

.whitespace-pre {
	white-space: pre;
}

.closeButton {
	outline: none;
	border: none;
	background: none;
	font-size: 2rem;
}

nav {
	background: var(--color-gray-light);
	color: var(--color-gray-dark);
}
.nav__item {
	display: block;
	padding: 0.5rem 0;
	margin-right: 1rem;
	text-decoration: none;
}
nav .nav__item--selected {
	text-decoration: underline;
}

main {
	margin: 1rem 0;
}

/* TIME */

.layout--time {
	display: grid;
	gap: 1rem;
}
@media screen and (min-width: 640px) {
	.layout--time {
		display: grid;
		gap: 1rem;
		grid-template-columns: 2fr 1fr;
	}
	.layout--time .timerContainer {
		order: 2;
	}
}


dialog.dialog-closer {
	padding: 0;
}
dialog.dialog-closer > .dialog-contents {
	padding: 1rem;
}

.timer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	justify-content: space-between;
	padding: 0.5rem 1rem;
	border: 1px solid var(--color-blue-dark);
	background: var(--color-blue-light);
	box-shadow: 0 2px 2px 1px var(--color-blue-light);
}

.timer--resume {
	background: var(--color-gray-light);
	border: 1px solid var(--color-gray-dark);
}

.timeHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 1rem;
	border: 1px solid var(--color-blue-dark);
	background: var(--color-blue-light);
	box-shadow: 0 2px 2px 1px var(--color-blue-light);
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.tag {
	display: inline-block;
	border-radius: 10px;
	border: 1px solid rgba(0,0,0,0.2);
	color: var(--color-white);
	background: var(--color-blue-dark);
	font-weight: bold;
	padding: 3px 5px;
	font-size: 0.6rem;
}
.tag--clickable {
	cursor: pointer;
}
.tag--clickable:hover {
	background: var(--color-blue-darker);
}

.projectFilter, .projectSelect {
	padding: 0.5rem 1rem;
	border: 1px solid var(--color-gray-dark);
	background: var(--color-gray-light);
}
details summary {
	user-select: none;
}

.projectsList > li > div {
	display: grid;
	grid-template-columns: 1fr min-content;
	padding: 0.2rem 0;
	min-height: 26px;
}

.projectStats {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 1rem;
}

.projectStats__subtotals > li {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1rem;
	padding: 0.2rem 0;
}

.projectEntry .projectEntry__select {
	display: none;
}
.projectEntry {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr 1fr;
	gap: 1rem;
	padding: 0.2rem 0;
	align-items: center;
	min-height: 26px;
}
.projectEntry:hover {
	background-color: var(--color-gray-light);
}
.projectEntries.projectEntries--selectionEnabled .projectEntry {
	grid-template-columns: min-content 1fr 1fr 3fr 1fr;
}
.projectEntries.projectEntries--selectionEnabled .projectEntry__select {
	display: block;
}

/* INVOICES */

.invoicesList {
	margin-top: 0.5rem;
	margin-bottom: 2rem;
}
.invoicesList > li {
	min-height: 26px;
	display: grid;
	grid-template-columns: min-content 1fr min-content;
	padding: 0.2rem 0;
	gap: 1rem;
}

.layout--invoices h2 {
	margin: 0.5rem 0;
}


.layout--invoice input, .layout--invoice textarea {
	min-width: 0;
	border: 1px solid var(--color-gray-light);
	background: transparent;
}

.layout--invoice input:disabled, .layout--invoice textarea:disabled {
	opacity: 1;
	color: var(--color-black);
	padding: 0;
	border: none;
}

.invoice__attributes {
	display: grid;
	column-gap: 1rem;
	row-gap: 0.5rem;
	grid-template-columns: min-content 1fr;
}

.lineItem {
	padding: 0.5rem 0;
	display: grid;
	grid-template-columns: min-content 4fr 1fr 1fr 1fr min-content;
	gap: 0.5rem;
	align-items: center;
	background: var(--color-white);
	border-top: 1px solid transparent;
	border-bottom: 1px dotted var(--color-black);

	position: relative;
	will-change: transform;
}

.invoice--issued .lineItem {
	grid-template-columns: 4fr 1fr 1fr 1fr;
}

.lineItem--idle {
	transition: 0.25s ease transform;
}
.lineItem--dragging {
	cursor: grabbing;
	z-index: 10;
	background: var(--color-gray-light);
	border: 1px solid var(--color-black);
}
.lineItem--idle .lineItem__dragHandle {
	cursor: grab;
}
.lineItem__dragHandle::after {
	content: '⠿';
	padding: 3px;
}
.lineItem__remove, .lineItem__dragHandle {
	opacity: 0.5;
}
.lineItem__remove:hover, .lineItem__dragHandle:hover {
	opacity: 1;
}

.lineItem button {
	background: transparent;
	outline: none;
	border: none;
}

.invoice__footer {
	display: grid;
	grid-template-columns: min-content min-content;
	column-gap: 1rem;
	row-gap: 0.5rem;
	justify-items: end;
	justify-content: end;
}

.invoice--issued ::placeholder {
	opacity: 0;
}
.invoice--issued .tax__description::placeholder, .invoice--issued .tax__input::placeholder {
	opacity: 1 !important;
	color: black !important;
}
.tax__input {
	padding-right: 1.2em !important;
	padding-top: 2px !important;
	min-width: 0;
	max-width: 75px;
}
.tax__percent {
	position: absolute;
	top: 0;
	right: 0;
	padding: 2px;
	font-weight: bold;
	pointer-events: none;
}

.draftOverlay {
	display: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number] {
	-moz-appearance: textfield;
}

@media print {
	nav, .layout--invoice > header {
		display: none;
	}
	::placeholder {
		opacity: 0;
	}
	.tax__description::placeholder, .tax__input::placeholder {
		opacity: 1 !important;
		color: black !important;
	}
	.layout--invoice button, .lineItem button, .lineItem__dragHandle {
		display: none;
	}
	.lineItem {
		grid-template-columns: 4fr 1fr 1fr 1fr;
	}
	.container {
		max-width: unset;
	}
	input, textarea {
		border: none !important;
		outline: none;
		resize: none;
		padding: 0;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
	}
	input[type="date"]::-webkit-inner-spin-button,
	input[type="date"]::-webkit-calendar-picker-indicator {
		display: none;
		-webkit-appearance: none;
	}

	input[type="date"][value=""] {
		display: none;
	}
	input[type="date"][value=""] + span {
		display: block;
	}

	.layout--invoice .draftOverlay {
		display: block;
		position: absolute;
		top: 3rem;
		left: 3rem;
		color: red;
		font-size: 5rem;
		font-weight: bold;
		text-transform: uppercase;
		opacity: 0.25;
		transform: rotate(-15deg);
	}
}