:root {
	--primary-theme-color: #FF5722;
	--light-theme-color: #FFCCBC;
	--accent-theme-color: #FFC107;
	--text-theme-color: #FFFFFF;
	--primary-text-color: #212121;
	--secondary-text-color: #727272;
	--divider-color: #B6B6B6;
	--side-nav-width: 200px;
}

body {
	margin: 0;
	color: var(--primary-text-color);
}

nav a {
	display: inline-block;
	text-decoration: none;
	font-weight: bold;
}

nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

nav svg {
	display: inline-block;
	vertical-align: middle;
	width: 32px;
	height: 32px;
	margin-right: .5em;
	fill: currentColor;
}

#view {
	flex-grow: 1;
}

#view > header {
	position: sticky;
	top: 0;
	height: 48px;
	width: 100%;
	color: var(--text-theme-color);
	background-color: var(--primary-theme-color);
	box-shadow: 0 2px 4px -2px #999;
}

#header {
	display: flex;
	width: 100%;
}

#header svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
	align-self: center;
}

#header a {
	color: inherit;
	text-decoration: none;
}

#header button {
	color: inherit;
	font: inherit;
	background-color: transparent;
	border: none;
	margin: 0;
	padding: 0;
	outline: none;
}

#header [type="search"] {
	background-color: transparent;
	border: none;
	outline: none;
	padding: 0;
	font-size: inherit;
	color: inherit;
	margin-left: .8em;
	flex-grow: 1;
	flex-basis: 0;
	min-width: 0;
}

#header ::-webkit-input-placeholder {
	color: var(--light-theme-color);
	line-height: 1.2;
}

#header ::-webkit-search-cancel-button {
	display: none;
}

#header .back, #header .close {
	height: 48px;
	padding: 0 .8em;
	display: inline-flex;
}

#header h2 {
	display: inline-block;
	margin: 0;
	line-height: 48px;
	font-size: larger;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

#header h2:first-child {
	text-indent: .8em;
}

#header menu {
	margin: 0;
	padding: 0;
	margin-left: auto;
	white-space: nowrap;
}

#header menu button {
	display: inline-flex;
	padding: 0 .8em;
	height: 48px;
}

#action {
	position: fixed;
	margin: 0;
	padding: 0;
	font: inherit;
	right: 1em;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	outline: none;
	background-color: var(--primary-theme-color);
	text-decoration: none;
	text-align: center;
	box-shadow: 0 4px 8px #999;
	display: flex;
	justify-content: center;
	align-items: center;
	bottom: 2em;
}

#action svg {
	width: 24px;
	height: 24px;
	fill: var(--text-theme-color);
}

main {
    display: grid;
    /* overflow-y: auto; */
    box-sizing: border-box;
    /* grid-template-columns: 1fr auto;
    grid-auto-flow: column;
    grid-template-rows: repeat(auto-fill, minmax(min-content, 3em));
    grid-auto-rows: min-content; */
    padding-bottom: 64px;
}

main > aside {
    grid-column-end: -1;
    grid-row: 1/-1;
    padding: 0 1em;
    width: var(--side-nav-width);
    box-sizing: border-box;
    background-image: linear-gradient(to right, var(--divider-color) .1em, transparent .1em);
}

main > aside > fieldset {
	position: sticky;
	top: 48px;
}

main menu {
	padding: 0;
}

form {
	padding: 1em;
}

form input, form select, form textarea {
	font: inherit;
}

form label {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: .5em;
	align-items: center;
	margin: 1em auto;
}

form textarea {
	display: block;
	flex-grow: 1;
	margin-bottom: 1em;
	resize: vertical;
	text-indent: .5em;
}

main button {
	border: 2px solid black;
	margin: 1em;
}

main ul {
	list-style-type: none;
	margin: 0;
	padding: .5em;
}

main ul li {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--divider-color);
}

main ul li > a {
	text-decoration: none;
	display: flex;
	width: 100%;
	padding: 1em;
	align-items: center;
	gap: 0.5em;
}

main ul li > strong {
	padding: 1em;
}

main ul li time {
	margin-left: auto;
	font-family: monospace;
	font-size: 1rem;
}

main ul li .quantity {
	margin-left: auto;
	padding: 1em;
}

main ul li .code {
	width: 100%;
	margin-left: 1em;
}

main p span {
	display: block;
	margin: .3em 0;
}

table > thead > tr {
	background-color: #eee;
}

table > thead > tr > th {
	text-align: left;
}

.row:nth-child(even) {
	background-color: #eee;
}

.paginator {
	display: flex;
	align-items: center;
	line-height: 48px;
}

.paginator span {
	margin-top: -.25em;
}

.paginator button {
	border: none;
	background: none;
	margin: 0;
	padding: 0;
	outline: none;
	height: 48px;
	width: 48px;
}

.paginator button svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.price {
	display: block;
	width: 100%;
	text-align: right;
	padding: 1em;
}

.price::before {
	content: '$';
}

.dialog {
	position: absolute;
	top: 10vh;
	left: 0;
	right: 0;
	background-color: #fff;
	border: 2px solid;
	text-align: center;
	padding: 1em;
	margin: 1em;
}

.dialog form {
	text-align: left;
}

form[method="dialog"] menu {
	display: flex;
	justify-content: space-between;
	padding: 0;
}

@media (max-width: 720px) {
	main {
		/* height: calc(100vh - 48px * 2); */
		padding-block-end: 128px;
	}
	nav {
		background-color: var(--primary-theme-color);
		position: fixed;
		bottom: 0;
		box-shadow: 0 -1px 5px 0 #999;
		z-index: 999;
	}
	nav h1 {
		display: none;
	}
	nav ul {
		display: flex;
		width: 100vw;
	}
	nav li {
		flex-grow: 1;
		text-align: center;
	}
	nav svg {
		margin-top: -.1em;
	}
	nav a {
		width: 100%;
		box-sizing: border-box;
		color: var(--light-theme-color);
		line-height: 48px;
	}
	nav a.active {
		color: var(--text-theme-color);
		background-image: linear-gradient(transparent calc(100% - .1em), var(--text-theme-color) calc(100% - .1em));
	}
    main > aside {
        position: fixed;
        background-color: #fff;
        bottom: 0;
        height: 100vh;
        right: -100vw;
        transition: transform .1s ease-in;
        z-index: 1;
    }
    main > aside.open {
        transform: translateX(-100vw);
    }
    main > aside::before {
        content: '';
        position: fixed;
        top: 0;
        bottom: 0;
        left: -100vw;
        background-color: rgba(0, 0, 0, .5);
        width: 100vw;
    }
	#action {
		bottom: calc(48px + 2em);
	}
	.paginator {
		justify-content: space-between;
		color: var(--primary-theme-color);
		background-color: var(--light-theme-color);
	}
	.paginator button svg {
		color: var(--primary-theme-color);
	}
	.paginator [disabled] svg {
		color: var(--divider-color)
	}
}

@media (min-width: 721px) {
	#container {
		display: flex;
	}
	#view {
		/* max-height: 100vh; */
		min-height: 100vh;
	}
	main {
		flex-grow: 1;
		/* height: calc(100vh - 48px); */	
	}
	main:has(> aside) {
		grid-template-columns: 1fr auto;
	}
	nav {
		min-height: 100vh;
		width: var(--side-nav-width);
		/* background-image: linear-gradient(to right, transparent calc(100% - .1em), var(--divider-color) calc(100% - .1em)); */
	}
	nav h1 {
		margin: 0;
		text-align: center;
		line-height: 48px;
		background-color: var(--primary-theme-color);
		box-shadow: 0 2px 4px -2px #999;
		position: sticky;
		top: 0;
	}
	nav ul {
		position: sticky;
		top: 48px;
	}
	nav li a {
		width: 100%;
		box-sizing: border-box;
		padding: 1em;
		color: var(--primary-text-color);
	}
	nav h1 a {
		color: var(--text-theme-color);
	}
	nav svg {
		color: var(--secondary-text-color);
		margin-right: 1em;
	}
	nav li a.active {
		color: var(--primary-theme-color);
		background: var(--light-theme-color);
		/* background-image: linear-gradient(to right, transparent calc(100% - .1em), var(--divider-color) calc(100% - .1em)); */
	}
	nav li a.active svg {
		color: var(--primary-theme-color);
	}
	nav li span {
		line-height: 32px;
	}
	#header {
		left: var(--side-nav-width);
		width: calc(100vw - var(--side-nav-width));
	}
	#header .back, #header .more {
		display: none;
	}
	#header .back + h2 {
		text-indent: .8em;
	}
	.paginator {
		position: fixed;
		bottom: 1em;
		width: calc(100vw - var(--side-nav-width));
		justify-content: center;
	}
}

#scan {
	padding-top: .5em;
}

#scan svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

#layout {
	display: grid;
	min-height: 100vh;
	grid-template-rows: auto 1fr auto;
}

#layout > nav {
	display: flex;
	column-gap: 1em;
	height: auto;
	width: 100vw;
	background-image: none;
	padding: 1em;
	box-sizing: border-box;
	background-color: #222222;
}

#layout > nav a {
	color: var(--text-theme-color);
}

#layout > main {
	height: auto;
}

#layout > footer {
	padding-block: 1em;
	text-align: center;
}

#layout .logo {
	display: block;
	max-width: 100vw;
	margin: 0 auto;
}

#layout .call_to_action {
	text-align: center;
}

@media (max-width: 720px) {
	#layout > nav {
		position: static;
	}
}

#catalogue {
	box-sizing: border-box;
	width: 100%;
	padding: 1em;
	max-width: 1024px;
	margin: 0 auto;
}

#catalogue > h1 {
	font-size: 1rem;
}

#catalogue > ul > li > article {
	display: grid;
	width: 100%;
	height: calc(100% - 2em);
	background-color: #eee;
	padding: 1em;
	align-items: end;
    grid-template-rows: 1fr auto auto;
}