:root {
	--euterm-blue: #163f84;

	--button-background: var(--euterm-blue);
	--button-disabled: #555;
	--button-clicked: #aaa;

	--font: 'Roboto';
	--font-size: 14pt;

	--pin-button-color: #fff;
	--pin-button-background: #555;
	--pin-button-pressed: var(--euterm-blue);

	--action-requested: #b7d297;

	--layout-subpage: 64px;
	--layout-footer: 24px;

	--page-shadow-offset: 0px;
	--page-header: 0px;

	--page-barcode: 0px;
	--page-barcode-display: none;
}

@font-face {
	font-family: "Roboto";
	src:
		local("Roboto"),
		url("/fonts/v0/roboto.ttf");
}

@font-face {
	font-family: "Roboto Mono";
	src:
		local("Roboto Mono"),
		url("/fonts/v0/roboto_mono.ttf");
}


@font-face {
	font-family: "Roboto Condensed";
	src:
		local("Roboto Condensed"),
		url("/fonts/v0/roboto_condensed.ttf");
}

html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

[onClick] {
	cursor: pointer;
}

.no-select {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.no-select:focus {
	outline: none !important;
}

html,
body {
	margin: 0;
	padding: 0;
	background-color: #fff;
	height: 100dvh;
}

* {
	font-family: var(--font);
	font-size: var(--font-size);
}

body {
	display: grid;
	grid-template-areas:
		"header"
		"page-header"
		"app"
		"barcode"
		"footer"
	;

	&.layout-main {
		--page-shadow-offset: 64px;

		grid-template-rows:
			128px var(--page-header) 1fr var(--page-barcode) var(--layout-footer);
	}

	&.layout-subpage {
		grid-template-rows:
			var(--layout-subpage) var(--page-header) 1fr var(--page-barcode) var(--layout-footer);
	}

	&.barcode-input {
		--page-barcode: 64px;
		--page-barcode-display: grid;
	}
}

#header-main {
	grid-area: header;
	display: grid;
	justify-items: center;
	align-items: center;
	background-color: var(--euterm-blue);
	padding: 16px;

	img {
		height: 96px;
	}
}

#header-subpage {
	grid-area: header;
	display: grid;
	grid-template-columns: min-content 1fr min-content;
	grid-gap: 16px;
	justify-items: left;
	align-items: center;
	color: #fff;
	background-color: var(--euterm-blue);
	padding: 16px;
	z-index: 16385;

	img {
		height: 24px;
		cursor: pointer;
	}
}

#header-shadow {
	position: absolute;
	top: calc(var(--page-header) + var(--page-shadow-offset));
	z-index: 16384;
	height: 64px;
	width: 100dvw;
	box-shadow: 0px 15px 24px -20px rgba(0, 0, 0, 0.5);
}

#page-header {
	z-index: 16385;
}

h1 {
	font-size: 1.35em;

	&:first-child {
		margin-top: 0;
	}
}

h2 {
	font-size: 1.1em;
}

.ellipsis {
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#app {
	grid-area: app;
	padding: 32px 16px;
	overflow-y: scroll;
	scrollbar-width: none;
}

#settings {
	user-select: none;

	.contents {
		padding: 32px;

		.section-header {
			&:first-child {
				margin-top: 0px;
			}

			&.version {
				color: var(--euterm-blue);
			}

			font-weight: bold;
			margin-top: 16px;
			margin-bottom: 8px;
		}

		.articleno {
			display: grid;
			grid-template-columns: min-content 1fr;
			grid-gap: 6px;
		}

		.save {
			display: grid;
			justify-items: center;
			margin-top: 32px;
		}
	}
}

#barcode {
	grid-area: barcode;

	display: var(--page-barcode-display);

	grid-template-columns: 1fr min-content;
	grid-gap: 16px;
	align-items: center;

	border-top: 1px solid #bbb;
	color: #fff;
	background-color: #eee;
	padding: 0 16px;

	input {
		padding: 4px 8px;
		font-family: 'Roboto Mono';
		min-width: 20px;
	}
}

#footer {
	grid-area: footer;
	display: grid;
	justify-items: center;
	align-items: center;
	background-color: #fff;
	border-top: 1px solid #bbb;
	border-bottom: 1px solid #bbb;
}

button {
	color: #fff;
	background-color: var(--button-background);
	padding: 8px 16px;
	border-radius: 6px;
	border: none;
	font-size: 1em;
	white-space: nowrap;

	&:disabled {
		background-color: var(--button-disabled);
	}

	&:active {
		background-color: var(--button-clicked);
	}
}

.doc {
	border: 2px solid #5aa02c;
	background-color: #e3f4d7;
	color: #447821;
	padding: 8px 16px;
	border-radius: 4px;
}

dialog {
	box-shadow: 5px 5px 20px -5px rgba(0, 0, 0, 0.75);

	&::backdrop {
		background-color: rgba(0, 0, 0, 0.50);
	}
}

dialog.overflowed-text {
	padding: 32px;
	background-color: #fff;
	border: none;
	border-radius: 8px;
	word-wrap: break-word;
}

dialog.euterm {
	padding: 0px;
	border-radius: 8px;
	border: none;
	box-shadow: 5px 5px 20px -5px rgba(0, 0, 0, 0.75);

	.title {
		display: grid;
		grid-template-columns: 1fr min-content;
		padding: 8px;
		background: var(--euterm-blue);

		.label {
			color: #fff;
			padding-left: 8px;
		}

		.close {
			height: 24px;
			cursor: pointer;
		}
	}
}

#event-queue {
	.status {
		img {
			display: none;
			width: 64px;
		}

		&.empty {
			.green {
				display: block;
			}
		}

		&.working {
			.yellow {
				display: block;
			}
		}

		&.waiting {
			.red {
				display: block;
			}
		}
	}
}

#scan-code {
	border: unset;
	background-color: rgba(0, 0, 0, 0);
	box-shadow: unset;

	.layout {
		display: grid;
		justify-items: center;

		.dialog {
			border-radius: 8px;
			background-color: var(--action-requested);
			display: grid;
			grid-template-columns: min-content 1fr;
			grid-gap: 16px;
			padding: 16px;
			color: #000;

			img {
				height: 32px;
			}

			.message {
				word-wrap: break-word;
				text-wrap: wrap;
			}

			.abort {
				margin-top: 16px;
				grid-column: 1 / -1;
				text-align: center;
			}


		}

		.barcode-input {
			margin-top: 16px;
			display: none;
			background-color: #eee;
			border-radius: 4px;
			padding: 8px 12px;
			grid-template-columns: 1fr min-content;
			align-items: center;
			width: calc(90vw - 32px);

			input {
				width: 100%;
				padding: 4px 8px;
				font-family: monospace;
				font-size: 1em;
			}

			button {
				margin-left: 8px;
			}
		}
	}

	&.error .dialog {
		background-color: #ca6767;
		color: #fff;
		font-weight: bold;
	}

	&.waiting .dialog {
		background-color: #f5e89c;
	}
}

body.barcode-input #scan-code .barcode-input {
	display: grid;

}

body.barcode-input #scan-code[open]+#barcode {

	input,
	button {
		display: none;
	}
}

#picklist-deviation {
	.layout {
		padding: 32px;
		display: grid;
		grid-template-columns: min-content 1fr;
		grid-gap: 8px;
		justify-items: start;

		.clear {
			grid-column: 1 / -1;
			justify-self: center;
			height: 24px;
			margin-top: 8px;
			cursor: pointer;
		}

		.update {
			justify-self: center;
			grid-column: 1 / -1;
			margin-top: 16px;
		}
	}
}

dialog.article-details-error {
	background-color: #a02c2c;
	color: #fff;
	padding: 32px;
	border: 0;
	border-radius: 8px;

	.layout {
		display: grid;
		font-weight: bold;
		justify-items: center;

		button {
			margin-top: 32px;
			background-color: #fff;
			color: #000;
		}
	}
}

.picklist.customer-message {
	background-color: #fff;
	color: #000;
	border-radius: 8px;
	border: none;

	max-width: 85%;
}

/* pageheader-picklist {{{ */
.pageheader-picklist {

	&.showing-picklist {
		--page-header: 128px;
	}

	#picklist-header {
		display: grid;
		grid-template-rows: var(--page-header) 1fr;
		background: #fff;

		.header {
			display: grid;

			grid-template-areas:
				"lbl-recipient lbl-eut lbl-customer lbl-customer"
				"recipient     eut     customer     customer"
				"msg           msg     msg          action"
			;

			grid-template-columns: 1fr min-content min-content min-content;
			grid-template-rows: min-content min-content 1fr;

			white-space: nowrap;
			grid-gap: 4px 16px;

			.label {
				font-weight: bold;
				font-size: 0.80em;
				color: var(--euterm-blue);
				padding-top: 16px;

				&:nth-child(1) {
					padding-left: 16px;
				}

				&:nth-child(3) {
					padding-right: 16px;
				}
			}

			.data {
				font-size: 1em;
				color: #000;

				&.recipient {
					padding-left: 16px;
				}

				&.barcode {
					padding-right: 16px;
				}
			}

			.customer-message {

				display: grid;
				align-items: center;

				padding: 8px;
				margin: 8px 0px 16px 16px;

				&.empty {
					background-color: #e4fae8;
					border: 2px solid #97c1a0;
					border-radius: 8px;
					color: #1a4717;
					user-select: none;
				}

				&.given {
					background-color: #ffdb57;
					color: #000;
					border: 2px solid #eebb00;
					border-radius: 8px;
				}

				span {
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.actions {
				padding-right: 16px;
				align-self: center;

				img {
					height: 32px;
				}

				#actions-menu {
					inset: unset;
					top: 160px;
					right: 32px;

					padding: 16px;
					border: 1px solid #000;
					border-radius: 8px;

					.layout {
						display: grid;
						grid-gap: 32px;
					}
				}

			}
		}

		.line {
			border-bottom: 1px solid #bbb;
		}
	}
}

/* }}} */

/* page-picklist {{{ */
.page-picklist {

	&.showing-picklist {
		border-top: 1px solid #aaa;
	}

	#picklist-chooser {
		display: none;

		&.show {
			display: grid;
			justify-items: center;
		}

		&>div {
			display: grid;
			grid-template-columns: min-content 1fr;
			grid-gap: 16px;
			align-items: center;

			background-color: var(--action-requested);
			padding: 32px;
			border-radius: 8px;

			img {
				height: 32px;
			}
		}

		&.scan-error>div {
			background-color: #ca6767;
		}

		&.scan-waiting>div {
			background-color: #f3d340;
		}

	}

	#picklist {
		display: none;
		min-height: 100%;
		grid-template-rows: min-content;

		&.show {
			display: grid;
		}

		&>.info {
			display: grid;
			grid-template-columns: min-content 1fr;
			grid-gap: 16px;
			align-items: center;
			justify-self: center;
			margin-bottom: 16px;
		}

		&:not(.details) .articles {
			display: grid;
		}

		&.details .article-details {
			display: grid;
		}

		.articles {
			display: none;
			grid-template-rows: min-content;
			background-color: #fff;
			margin: 16px 0px 0px 0px;

			justify-items: center;
			grid-gap: 48px;

			.article {
				position: relative;
				width: 100%;
				max-width: 700px;
				user-select: none;
				cursor: pointer;

				display: grid;
				grid-template-areas:
					"articleno    articleno   articleno"
					"description  description description"
					"locationlist location    count"
				;
				grid-template-columns: min-content 1fr min-content;
				grid-template-rows: min-content min-content 56px;
				grid-gap: 8px 16px;

				align-items: end;

				border-radius: 8px;
				padding: 16px;
				background-color: #eee;
				border: 2px solid #bbb;

				box-shadow: 5px 5px 15px -5px rgba(64, 64, 64, 0.35);

				&[data-status="error"] {
					background-color: #fae4e4;
					border: 2px solid #c19797;
				}

				&[data-status="completed"] {
					background-color: #e4fae8;
					border: 2px solid #97c1a0;
				}

				&[data-status="picking"] {
					background-color: #fefcd7;
					border: 2px solid #f1d222;
				}

				.article-no {
					grid-area: articleno;
					word-wrap: break-word;
					position: relative;

				}

				.description {
					grid-area: description;
					font-size: 1em;
					--foo: 1;
				}

				.article-code {
					position: absolute;
					top: -16px;
					right: 16px;
					padding: 4px 8px;
					background-color: #555;
					color: #fff;
					border-radius: 6px;
					width: min-content;
					justify-self: end;
				}

				.location-list {
					grid-area: locationlist;

					img {
						display: block;
					}
				}

				.location {
					grid-area: location;
					font-size: 1.10em;
					font-family: monospace;

					background-color: #555;
					border-radius: 8px;
					padding: 4px 8px;
					color: #fff;
					justify-self: start;

				}

				.count {
					grid-area: count;
					justify-self: end;
					font-size: 1.25em;
					font-weight: bold;
					white-space: nowrap;
				}
			}
		}

		.article-details {
			/* article-no, article-description, actions */
			--article-no: 48px;
			--article-desc: 48px;
			--actions: 64px;
			--own-items: calc(var(--article-no) + var(--article-desc) + var(--actions) + 1px);
			display: none;
			grid-template-rows:
				var(--article-no) var(--article-desc) calc(100dvh - var(--layout-subpage) - var(--page-header) - var(--own-items) - var(--page-barcode) - var(--layout-footer)) var(--actions);
			justify-items: center;
			margin-top: -32px;
			margin-bottom: -32px;

			&>.article-no {
				font-family: 'Roboto Mono';
				align-self: end;
				font-size: 1.25em;
				display: grid;
				justify-items: center;
			}

			.article-description {
				align-self: start;
				text-align: center;
				color: var(--euterm-blue);
				width: 100%;
				padding-top: 8px;
			}

			.tabs {
				--border-thickness: 2px;
				--border-color: #444;
				--tab-inactive: #eee;
				display: grid;
				grid-template-columns: repeat(3, min-content) 1fr;
				grid-template-rows: min-content 1fr;
				width: 100%;

				.tab {
					padding: 12px 20px;
					border-top: var(--border-thickness) solid var(--border-color);
					border-right: var(--border-thickness) solid var(--border-color);
					border-bottom: var(--border-thickness) solid var(--border-color);
					cursor: pointer;
					user-select: none;
					display: grid;
					justify-items: center;
					white-space: nowrap;
					background-color: var(--tab-inactive);

					&:nth-child(1) {
						border-top-left-radius: 8px;
						border-left: var(--border-thickness) solid var(--border-color);
					}

					&:nth-child(3) {
						border-top-right-radius: 8px;
					}

					&.empty {
						padding: 0px;
						background-color: unset;
						border: none;
						border-bottom: var(--border-thickness) solid var(--border-color);
					}

				}

				.tab-content {
					border-left: var(--border-thickness) solid var(--border-color);
					border-right: var(--border-thickness) solid var(--border-color);
					border-bottom: var(--border-thickness) solid var(--border-color);
					grid-column: 1 / -1;
					overflow-y: scroll;
					scrollbar-width: none;

					&>.scan {
						padding-bottom: 32px;

						&>.article-details-scan {

							&.step-1 {
								.scan-location {
									display: grid;
								}

								.scan-article {
									display: none;
								}
							}

							&.step-2 {
								.scan-article {
									display: grid;
								}
							}

							&.step-3 {
								.scan-article {
									display: none;
								}

								.input-number {
									display: block;
								}

								&.SERIAL,
								&.BATCH,
								&.EAN13 {
									.article {
										display: block;
									}

									.scan-article-data {
										display: grid;
									}
								}

							}

							.scan-location,
							.scan-article,
							.scan-article-data {
								display: none;
								padding-top: 32px;
								grid-gap: 8px 16px;
								grid-template-columns: min-content min-content;
								align-items: center;
								justify-content: center;
								white-space: nowrap;

								img {
									height: 32px;
								}

								.error {
									color: #a00;
									font-weight: bold;
									grid-column: 2;
									justify-self: center;
								}
							}

							.location {
								font-family: 'Roboto Mono';
								margin-top: 16px;
								text-align: center;
								font-size: 1.25em;
								font-weight: bold;
								color: var(--euterm-blue);
							}

							.article {
								display: none;
								font-family: 'Roboto Mono';
								text-align: center;
								font-size: 1.25em;
								font-weight: bold;
								color: var(--euterm-blue);
							}

							.input-number {
								display: none;

								.input.number {
									margin-top: 8px;
									margin-bottom: 16px;
								}

								.digits {
									justify-content: center;
								}
							}

							/* Only COUNT article code will be having a number input panel. */
							&:not(.COUNT) .input-number {
								display: none !important;
							}
						}
					}

					.list {
						/* {{{ */
						padding: 16px;
						grid-template-columns: min-content 1fr min-content;
						grid-gap: 8px 32px;
						align-items: end;
						white-space: nowrap;

						.header {
							font-weight: bold;
						}

						.location {
							font-family: 'Roboto Mono';
						}

						.delete {
							height: 24px;
						}

						.line {
							grid-column: 1 / -1;
							border-bottom: 1px solid #aaa;
						}
					}

					/* }}} */

					.deviation {
						justify-items: center;
						justify-content: center;

						.layout {
							padding: 32px 16px;
							display: grid;
							grid-template-columns: min-content 1fr;
							grid-gap: 8px;
							justify-items: start;

							.clear {
								grid-column: 1 / -1;
								justify-self: center;
								height: 24px;
								margin-top: 8px;
								cursor: pointer;
							}

							.update {
								justify-self: center;
								grid-column: 1 / -1;
								margin-top: 16px;
							}
						}
					}

				}

				&.scan {
					&>.tab.scan {
						color: var(--euterm-blue);
						background-color: #fff;
						border-bottom: none;
					}

					&>.tab-content>.scan {
						display: block;
					}
				}

				&.list {
					&>.tab.list {
						color: var(--euterm-blue);
						background-color: #fff;
						border-bottom: none;
					}

					&>.tab-content>.list {
						display: grid;

					}
				}

				&.deviation {
					&>.tab.deviation {
						color: var(--euterm-blue);
						background-color: #fff;
						border-bottom: none;
					}

					&>.tab-content>.deviation {
						display: grid;
					}
				}
			}

			/* Tab contents are hid by default.
			 * They are shown when a class is added to the tabs div. */
			.tab-content>div {
				display: none;
			}

			.actions {
				display: grid;
				grid-template-columns: min-content min-content;
				grid-gap: 16px;
				align-items: center;
			}
		}
	}

}

/* }}} */

/* page-index {{{ */
.page-index {
	display: grid;
	justify-items: center;
	grid-template-rows: min-content 1fr;

	.menu {
		display: grid;
		grid-gap: 32px;
		grid-template-columns: repeat(2, min-content);
		justify-items: center;

		button {
			width: 100%;
		}

		.admin {
			grid-column: 1 / -1;
			width: min-content;
		}
	}

	.session {
		display: grid;
		justify-items: center;
		align-self: end;
		margin-top: 32px;

		.name {
			margin-bottom: 8px;
		}

	}

}

/* }}} */

/* page-login {{{ */
.page-login {
	display: grid;
	justify-items: center;

	.users {
		white-space: nowrap;

		.user {
			margin-bottom: 16px;
			border: 1px solid #aaa;
			border-radius: 8px;
			padding: 8px 16px;
			width: min-content;
			background-color: #f8f8f8;
		}
	}
}

/* }}} */

/* page-login_user {{{ */
.page-login_user {
	display: grid;
	grid-template-rows: min-content 1fr;
	justify-items: center;

	h1 {
		text-align: center;
	}

	#authentication-failed {
		display: none;
		align-self: start;
		border: 2px solid #883232;
		color: 2px solid #883232;
		background-color: #fff;
		font-weight: bold;
		padding: 16px 32px;
		width: min-content;
		white-space: nowrap;
		margin-top: 32px;
		border-radius: 8px;
	}

	#back {
		align-self: end;
		margin-top: 32px;
	}
}

/* }}} */

/* page-admin_login {{{ */
.page-admin_login {
	display: grid;
	grid-template-rows: repeat(2, min-content) 1fr;
	justify-items: center;

	#box {
		display: none;
		grid-gap: 16px;
		justify-items: center;
		padding: 16px;

		button {
			width: min-content;
		}

		.password-row {
			display: grid;
			grid-template-columns: min-content min-content;
			grid-gap: 8px;
			align-items: center;

			img {
				display: block;
				height: 20px;
			}

			&.hidden {
				.pass-hidden {
					display: block;
				}

				.pass-shown {
					display: none;
				}
			}

			.pass-hidden {
				display: none;
			}

			.pass-shown {
				display: block;
			}
		}
	}

	#authentication-failed {
		visibility: hidden;
		color: #a00;
		font-weight: bold;
		margin-top: 16px;
	}

	#back {
		align-self: end;
	}
}

/* }}} */

/* page-admin {{{ */
.page-admin {
	display: grid;
	grid-template-rows: min-content 1fr;
	justify-items: center;

	.buttons {
		display: grid;
		grid-gap: 16px;
		grid-template-columns: min-content min-content;
	}
}

/* }}} */

/* page-admin_users {{{ */
.page-admin_users {
	display: grid;
	grid-template-rows: min-content 1fr;
	justify-items: center;

	.users {
		margin-top: 16px;
		white-space: nowrap;

		.user {
			margin-bottom: 8px;
			border: 2px solid #5aa02c;
			background-color: #e3f4d7;
			color: #447821;
			padding: 8px 16px;
			border-radius: 4px;

			&.inactive {
				color: #784421;
				background-color: #f4e5d7;
				border: 2px solid #a05c2c;
			}
		}
	}

	#user-data {

		.contents {
			display: grid;
			grid-template-columns: min-content min-content;
			justify-items: start;
			align-items: center;
			grid-gap: 8px 16px;
			padding: 40px 16px 16px 16px;
		}

		.update {
			grid-column: 1 / -1;
			margin-top: 16px;
			width: min-content;
			justify-self: center;
		}

		[type="checkbox"] {
			zoom: 1.5;
			margin: 0;
		}
	}
}

/* }}} */

/* page-admin_picklists {{{ */
.page-admin_picklists {
	display: grid;
	grid-template-rows: min-content 1fr;
	justify-items: center;

	.picklists {
		display: grid;
		grid-template-columns: repeat(2, min-content);
		grid-gap: 16px 32px;
		align-items: end;
		white-space: nowrap;

		.picklist {
			font-family: 'Roboto Mono';
			font-weight: bold;
		}

		.line {
			grid-column: 1 / -1;
			border-bottom: 1px solid #ccc;

			&:last-child {
				display: none;
			}
		}

		.unlocked {
			color: #3a3;
		}
	}

	.back {
		margin-top: 32px;
		align-self: end;
	}
}

/* }}} */

/*
vim: foldmethod=marker
*/