/* @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"); */

html {
	overflow: hidden;
	background-color: #dbdbdb;
}

button {
	color: #3a3d44;
}
select {
	color: #3a3d44;
}

* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}

body {
	position: relative;
	height: 100dvh;
	font-family: Arial, Helvetica, sans-serif;
}

nav {
	position: fixed;
	bottom: 0px;
	width: 100%;

	left: 0;
	right: 0;

	background-color: #f73535;
	color: white;
	font-size: 0.8em;
}

nav ul {
	gap: 1.5em;
}

nav svg {
	stroke-width: 0px;
	width: 20px;
	fill: white;
}

nav li:nth-child(4) svg {
	fill: none;
	stroke: white;
}

nav li {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.25em;
	padding: 0.5em;
}

nav li:hover p {
	color: #f73535;
}

nav li .icon-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

ul {
	display: flex;
	gap: 1em;
	justify-content: center;
}

button:hover {
	background-color: #bdbdbd;
}

nav li:hover {
	background-color: white;
	color: #f73535;
}

li:hover svg {
	fill: #f73535;
}

nav li:nth-child(4):hover svg {
	fill: none;
	stroke: #f73535;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
	color: inherit;
	border-radius: 0.5em;
	color: #3a3d44;
}

nav a {
	color: white;
}

.item-name,
.item-quantity,
.variant-name,
.warning-message span,
.notification .message,
.user-name,
.user-email,
.activity-history h2,
.header h1,
.transactions h2,
.transaction h1,
.tags h2,
.value {
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;

	color: #3a3d44;
}

.item-name {
	font-size: 1em;
}

.variant-name {
	font-size: 0.8em;
	color: #838a9d;
}

.item-quantity {
	font-size: 0.9em;
	color: #3a3d44;
}

/* Dashboard Page */

.dashboard {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-content: start;
	gap: 1em;

	height: 100%;

	padding: 1em;
	background-color: #dbdbdb;
	overflow: auto;
	padding-bottom: 70px;
}

th,
td {
	padding-right: 2em;
	text-align: left;
}

.inventory-summary-table > div {
	display: grid;
	gap: 0.5em;
}

.dashboard h1 {
	grid-column: 1 / 3;
	grid-row: 1 / 2;

	vertical-align: baseline;
}

.dashboard .icon svg {
	width: 20px;
}

.recent-items,
.low-stock-items {
	display: grid;
	gap: 0.4em;

	margin-top: 0.75em;
}

.recent-items h2 {
	font-size: 1em;
	color: #3a3d44;
}

.low-stock-items h2 {
	font-size: 1em;
	color: #3a3d44;
}

.inventory-summary-table {
	grid-column: 1 / 3;
	grid-row: 2 / 3;
}

.insight-card {
	grid-row: 3 / 4;
}

.insight-card > div,
.inventory-summary-table > div {
	padding: 1em;
	border-radius: 0.5em;
	background-color: white;
	height: 100%;

	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

th {
	color: #838a9d;
	font-weight: 500;
}

.insight-card h2,
.inventory-summary-table h2 {
	font-size: 1em;
}

.insight-card .subtitle {
	font-size: 0.9em;
	color: #838a9d;
}

.recent-items {
	grid-column: 1 / 3;
	grid-row: 4 / 5;
}

.recent-items .items-container {
	display: flex;
	overflow-x: auto;
	gap: 1em;
}

.recent-items .item-card {
	flex-shrink: 0;
	position: relative;

	width: 9em;

	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: 6em auto 1fr;

	padding: 1em;
	background-color: white;
	border-radius: 0.5em;
}

.recent-items .item-card .item-triple-dot-button {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}

.item-triple-dot-button:hover {
	color: #f12626;
	background-color: transparent;
}

.recent-items .item-card a {
	grid-column: 1 / 3;
	grid-row: 1 / 4;

	display: grid;
	grid-template-rows: subgrid;
	grid-template-columns: subgrid;
}

.recent-items .item-card .item-image {
	grid-row: 1 / 2;
	grid-column: 1 / 3;

	width: 100%;

	background-color: #bdbdbd;
	border: 0px;
}

.recent-items .item-card .variant-name {
	align-self: start;
}

.recent-items .item-card .item-name {
	align-self: start;
}

.recent-items .item-card .item-quantity {
	align-self: start;

	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	font-size: 0.9em;
}

.recent-items .item-card .item-card-text-content {
	grid-row: 3/ 4;
	grid-column: 1 / 3;
}

.recent-items .item-card .edit-item-quantity-button {
	position: absolute;
	bottom: 0px;
	right: 0px;
}

.low-stock-items {
	grid-column: 1 / 3;
	grid-row: 5 / 6;
}

.low-stock-items .items-container,
.tag .items-container,
.item-quantity-edit .items-container,
.search .items-container,
.variants-section .items-container {
	display: grid;
	grid-template-columns: 1fr;
}

.low-stock-items .item-card,
.tag .item-card,
.search .item-card,
.variants-section .item-card {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1em;

	padding: 0.75em;
	border: 0.5px solid #eaeaea;
	background-color: white;
}

.low-stock-items .item-card a,
.tag .item-card a,
.item-quantity-edit .item-card a,
.search .item-card a,
.variants-section .item-card a {
	display: grid;
	grid-template-columns: 4em minmax(0, 1fr);
	grid-template-rows: 4em;
	align-content: center;
	row-gap: 0.1em;
	column-gap: 1em;
}

.low-stock-items .item-card .item-card-text-content,
.tag .item-card .item-card-text-content,
.search .item-card .item-card-text-content,
.variants-section .item-card .item-card-text-content {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: repeat(2, auto);
	column-gap: 20px;
}

.low-stock-items .item-card .item-quantity,
.tag .item-card .item-quantity,
.search .item-card .item-quantity,
.variants-section .item-card .item-quantity {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	justify-self: end;
	align-self: end;
}

.low-stock-items .item-card .item-quantity {
	color: orange;
}

.low-stock-items .item-card .item-name,
.tag .item-card .item-name,
.search .item-card .item-name,
.variants-section .item-card .item-name {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	align-self: end;
}

.low-stock-items .item-card .variant-name,
.tag .item-card .variant-name,
.search .item-card .variant-name,
.variants-section .item-card .variant-name {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	align-self: start;
}

.item-triple-dot-button {
	align-self: start;
	border: none;
	background-color: transparent;
	font-size: 1.1em;
	height: auto;
}

.low-stock-items .item-card .item-image,
.tag .item-card .item-image,
.item-quantity-edit .item-card .item-image,
.search .item-card .item-image,
.variants-section .item-card .item-image {
	background-color: #bdbdbd;
	border: 0px;
}

.item-image {
	object-fit: contain;
	border-radius: 0.25em;
}

.add-option-container-background {
	position: absolute;
	top: 0px;
	z-index: 1000;

	width: 100%;
	height: 100%;

	display: grid;
	justify-content: center;
	align-content: center;
	grid-template-columns: 1fr;
	align-content: end;

	background-color: rgba(0, 0, 0, 0.195);
}

.add-option-container {
	width: 100%;

	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 0.75em;
	padding: 2em;

	position: relative;

	background-color: white;
}

.add-option {
	padding: 1em;
	border-radius: 0.5em;
	border: 0px;
}

.add-option:hover {
	background-color: #bdbdbd;
}

.close-add-option-container-button {
	position: absolute;
	right: 0.75em;
	top: -0.75em;

	width: 2.5em;
	height: 2.5em;

	border-radius: 50%;
	border: 0px;
}
.close-add-option-container-button:hover {
	background-color: #ff4e4e;
	color: white;
}

.background-overlay {
	position: absolute;
	z-index: 1;

	height: 100%;
	width: 100%;
	background-color: #00000033;
}

.utility-box-container {
	position: fixed;
	bottom: 0px;
	z-index: 2;

	width: 100%;
	height: 70%;

	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: auto auto auto auto auto;
	align-content: start;
	gap: 1em;

	padding: 1em;
	background-color: white;
}

.utility-box-container svg {
	width: 20px;
	display: flex;
}

.utility-box-container .delete-item-button svg {
	stroke: #171717;
}

.utility-box-container .delete-item-button:hover svg {
	stroke: white;
}

.utility-box-container a {
	display: grid;
	align-content: center;
}

.utility-button-content,
.utility-box-container .delete-item-button {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0.75em;
}

.utility-box-container .utility-box-close-button {
	width: 1em;
	height: 1em;

	grid-column: 1 / 3;
	grid-row: 1 / 2;
	justify-self: end;
	border: 0px;
	border-radius: 50%;
	padding: 1em;

	display: flex;
	justify-content: center;
	align-items: center;
}

.utility-box-container .utility-box-close-button:hover {
	background-color: #ff4e4e;
	color: white;
}

.utility-box-container a,
.utility-box-container .delete-item-button {
	background-color: #f8f8f8;
	padding: 1em;
	border-radius: 0.5em;
	border: 0px;
	font-size: 1em;
	text-align: start;
}

.utility-box-container a:hover {
	background-color: #ededed;
}

.utility-box-container .delete-item-button:hover {
	background-color: #ff4e4e;
	color: white;
}

.utility-box-container .item {
	grid-row: 2 / 3;
	grid-column: 1 / 3;

	height: auto;

	display: grid;
	grid-template-columns: auto 1fr;
	grid-row: auto;
	align-content: center;
	column-gap: 0.75em;
}

.utility-box-container .item-image-container {
	grid-column: 1 / 2;
	grid-row: 1 / 2;

	width: 4em;
	height: 4em;

	border-radius: 0.5em;
	background-color: #bdbdbd;
	border: 0px;
}

.utility-box-container .item-text-content {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto auto;
	align-content: center;
}

/*  Items Page */
.items,
.inventory-summary,
.low-stock {
	height: 100%;

	display: flex;
	flex-direction: column;
	gap: 0.55em;
	align-content: start;

	padding: 1em;
	background-color: #dbdbdb;
	overflow: auto;
	padding-bottom: 70px;
}

.items .table-container,
.inventory-summary .table-container {
	padding: 0.5em;
	border-radius: 0.5em;
	background-color: white;
}

.items .actions,
.inventory-summary .actions,
.low-stock .actions {
	display: grid;
	grid-template-columns: 1fr auto;
	justify-content: space-between;
	gap: 0.5em;
}

.items .actions select,
.inventory-summary .actions select,
.low-stock .actions select {
	width: 100%;
}

.items .actions button,
.items .actions select,
.inventory-summary .actions button,
.inventory-summary .actions select,
.low-stock .actions button,
.low-stock .actions select,
.tags select {
	padding: 0.75em;
	border-radius: 0.5em;
	border: 0px;
	background-color: #f8f8f8;
	margin-left: auto;
	outline: none;
}

.tags .actions {
	display: flex;
	gap: 0.5em;
}

.tags .actions form {
	margin-left: auto;
}

.tags button {
	height: 100%;
	padding-left: 1em;
	padding-right: 1em;
	border-radius: 0.5em;
	border: 0px;
	background-color: white;
}

.tags .actions {
	margin-bottom: 0.5em;
}

.items .items-container,
.inventory-summary .items-container,
.low-stock .items-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
	gap: 1em;
}

.items .item-card,
.inventory-summary .item-card,
.low-stock .item-card {
	flex-shrink: 0;
	position: relative;

	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: 8em auto auto;
	gap: 0.5em;

	padding: 1em;
	background-color: white;
	border-radius: 0.5em;
}

.items .item-card a,
.inventory-summary .item-card a,
.low-stock .item-card a {
	grid-column: 1 / 3;
	grid-row: 1 / 4;

	display: grid;
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
}

.items .item-image,
.inventory-summary .item-image,
.low-stock .item-image {
	grid-column: 1 / 3;
	grid-row: 1 / 2;

	background-color: #bdbdbd;
}

.items .item-card-text-content,
.inventory-summary .item-card-text-content,
.low-stock .item-card-text-content {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}

.items .add-item-button,
.inventory-summary .add-item-button,
.low-stock .add-item-button {
	position: absolute;
	bottom: 4.25em;
	right: 1.25em;
	background-color: #f73535;
	color: white;
	border: 0px;
	padding: 0.5em;
	border-radius: 0.25em;
	font-size: 1em;
}

.items .add-item-button:hover,
.inventory-summary .add-item-button:hover,
.low-stock .add-item-button:hover {
	background-color: #6fe36f;
	color: white;
}

.item-card-text-content .low-stock-indicator,
.inventory-summary .low-stock-indicator,
.low-stock .low-stock-indicator {
	position: absolute;
	top: 10.75em;

	padding: 0.25em;
	margin-left: 0.4em;
	border-radius: 0.25em;

	background-color: #f12626;

	font-size: 0.7em;
	color: white;
}

.items .item-triple-dot-button,
.inventory-summary .item-triple-dot-button,
.low-stock .item-triple-dot-button {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	transform: rotate(180deg);
}

.warning-message-container {
	position: absolute;
	left: 0;
	right: 0;
	top: 50dvh;
	margin-inline: auto;

	max-width: 400px;

	padding: 1em;
	border-radius: 0.5em;
	background-color: white;

	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	justify-content: center;
	gap: 1em;
}

.warning-message-container .warning-message {
	grid-column: 1 / 3;
	hyphens: auto;
}

.warning-message-container button,
.add-tag-form button {
	grid-row: 2 / 3;
	background-color: #eaeaea;
	border: 0px;
	padding: 0.5em;
	border-radius: 0.25em;
}

/* Item page */
.item-description,
.item-edit,
.item-adding,
.variant-adding,
.new-variant-adding,
.item-quantity-edit {
	height: 100%;

	padding: 1em;
	background-color: #dbdbdb;
	overflow: auto;
	padding-bottom: 70px;

	display: grid;
	grid-template-rows: auto 1fr;
	gap: 0.5em;
}

.item-description .item-container,
.item-edit form,
.item-adding form,
.item-quantity-edit form,
.variant-adding .variant-creation-container {
	max-width: 500px;

	background-color: white;
	border-radius: 0.5em;
	padding: 1.5em;

	display: flex;
	flex-direction: column;
}

.item-container h2 {
	grid-column: 1 / 3;
	font-size: 2em;
}

.item-description button {
	background-color: #eaeaea;
	padding: 0.5em;
	border: 0px;
	border-radius: 0.5em;
}

.item-description .section-title {
	font-size: 0.8em;
	color: #838a9d;
}

.item-description .actions {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 1em;
}

.item-description .update-date,
.item-description .actions,
.item-description .quantity,
.item-description .price,
.item-description .min-level,
.item-description .tags-section,
.item-description .variants-section,
.item-description .variant-name-section,
.item-description .total-value,
.item-description .item-summary,
.item-description h2 {
	padding: 10px;
}

.item-description .update-date .value {
	font-size: 0.75em;
}

.item-description form {
	padding-top: 10px;
}

.item-description .update-date,
.item-description .actions,
.item-description .quantity,
.item-description .price,
.item-description .min-level,
.item-description .tags-section,
.item-description .variants-section,
.item-description .variant-name-section,
.item-description .total-value,
.item-description .item-summary,
.item-description {
	border-bottom: 1px solid #eaeaea;
	border-right: 1px solid #eaeaea;
}

.item-description .update-date,
.item-description .quantity,
.item-description .price,
.item-description .tags-section,
.item-description .variants-section,
.item-description .variant-name-section,
.item-description .item-summary,
.item-description {
	border-bottom: 1px solid #eaeaea;
	border-right: 1px solid #eaeaea;
	border-left: 1px solid #eaeaea;
}

.item-description h2 {
	border-bottom: 1px solid #eaeaea;
}

.item-description .item-summary {
	display: flex;
	gap: 3em;
}

.item-description .item-details,
.item-description .item-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.item-description .min-level,
.item-description .price {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
}

.item-description .quantity {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
}

.item-description .quantity .title {
	grid-template-columns: 1 / 3;
	grid-row: 1 / 2;
}

.item-description .quantity .value {
	grid-row: 2 / 3;
}

.item-description .quantity a {
	grid-row: 1 / 3;
	grid-column: 2 / 3;

	align-self: center;
}

.item-description .variants-section {
	display: grid;
	gap: 0.5em;
}

.item-description .variant-name-section {
	display: grid;
}

.item-description .variants-section .item-triple-dot-button {
	transform: rotate(-90deg);
	background-color: transparent;

	align-self: center;
}

.item-description .tags-section .empty-value-placeholder {
	color: #838a9d;
}

.item-description form {
	display: flex;
}

.item-description .delete-item-button {
	flex-grow: 1;
}

.item-description .delete-item-button:hover {
	background-color: #ff4e4e;
	color: white;
}

.item-description .tags-section {
	display: grid;
	gap: 0.5em;
}

.item-description .tags-container,
.item-adding .variants-container {
	max-height: 150px;

	display: flex;
	flex-flow: row wrap;
	align-items: start;
	flex-wrap: wrap;
	gap: 0.5em;
	overflow: auto;
}

.item-description .tags-container a,
.item-adding .variants-container div {
	padding-bottom: 0.5em;
	padding-top: 0.5em;
	padding-right: 1.25em;
	padding-left: 1.25em;
	border-radius: 1em;

	font-size: 0.8em;
	background-color: #eaeaea;
}

/* Edit Item page */
.item-edit form,
.item-adding form,
.new-variant-adding form {
	max-width: 500px;

	background-color: white;
	border-radius: 0.5em;
	padding: 1em;

	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-content: start;
}

.item-edit button,
.item-adding button,
.new-variant-adding button {
	background-color: #eaeaea;
	padding: 0.5em;
	border: 0px;
	border-radius: 0.5em;
}

.item-edit input,
.item-adding input,
.variant-adding input,
.new-variant-adding input {
	border: 0px;
	outline: none;
}

.item-edit label,
.item-edit .tag-field div,
.item-edit .section-title,
.item-adding label,
.item-adding .tag-field div,
.item-adding .section-title,
.variant-adding label,
.new-variant-adding label,
.new-variant-adding .tag-field div,
.new-variant-adding .section-title {
	font-size: 0.8em;
	color: #838a9d;
}

.item-edit .item-name-field,
.item-adding .item-name-field,
.new-variant-adding .item-name-field {
	grid-row: 1 / 2;
	grid-column: 1 / 3;
}

.item-edit .item-name-field input,
.item-adding .item-name-field input,
.new-variant-adding .item-name-field input {
	width: 100%;

	font-size: 2em;
}

.item-edit .total-value,
.item-adding .total-value,
.new-variant-adding .total-value {
	width: 100%;
}

.item-edit input,
.item-edit .value,
.item-adding input,
.item-adding .value,
.new-variant-adding input,
.new-variant-adding .value {
	font-size: clamp(0.8em, 2.5vw, 1em);
}

.item-edit .quantity-field,
.item-edit .min-level-field,
.item-adding .quantity-field,
.item-adding .min-level-field {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-content: start;
	justify-content: start;
	column-gap: 0.5em;
	grid-template-rows: auto 30px;
	align-items: center;
}

.new-variant-adding .quantity-field,
.new-variant-adding .min-level-field {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-content: start;
	justify-content: start;
	column-gap: 0.5em;
	align-items: center;
}

.item-edit .quantity-field label,
.item-adding .quantity-field label,
.new-variant-adding .quantity-field label {
	grid-column: 1 / 4;
	grid-row: 1 / 2;
}

.item-edit .quantity-field select,
.item-adding .quantity-field select,
.new-variant-adding .quantity-field select {
	appearance: none;
	border: 0px;
	outline: none;
	justify-self: end;
}

.item-edit .quantity-field input,
.item-edit .min-level-field input,
.item-adding .quantity-field input,
.item-adding .min-level-field input,
.new-variant-adding .quantity-field input,
.new-variant-adding .min-level-field input {
	border-right: 1px solid #dbdbdb;
}

.item-edit .tag-field,
.item-adding .tag-field,
.new-variant-adding .tag-field {
	grid-column: 1 / 3;
}

.item-edit .price-field,
.item-edit .total-value,
.item-adding .price-field,
.item-adding .total-value,
.variant-adding .price-field,
.variant-adding .item-name-field,
.variant-adding .quantity-field,
.new-variant-adding .price-field,
.new-variant-adding .item-name-field,
.new-variant-adding .quantity-field {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	align-content: start;
	align-items: center;
}

.item-edit .min-level-field label:nth-child(1),
.item-adding .min-level-field label:nth-child(1),
.new-variant-adding .min-level-field label:nth-child(1) {
	grid-column: 1 / 4;
}

.item-edit #min-level,
.item-adding #min-level,
.new-variant-adding #min-level {
	grid-column: 1 / 2;
}

.item-edit #notify,
.item-adding #notify,
.new-variant-adding #notify {
	max-height: 20px;
}

.item-edit .item-name-field,
.item-edit .quantity-field,
.item-edit .min-level-field,
.item-edit .price-field,
.item-edit .total-value,
.item-edit .tag-field,
.item-edit .note-field,
.item-adding .item-name-field,
.item-adding .quantity-field,
.item-adding .min-level-field,
.item-adding .price-field,
.item-adding .total-value,
.item-adding .tag-field,
.item-adding .note-field,
.item-adding .variant-checkbox-container,
.variant-adding .item-name-field,
.variant-adding .price-field,
.variant-adding .quantity-field,
.variant-adding h2,
.new-variant-adding .item-name-field,
.new-variant-adding .price-field,
.new-variant-adding .quantity-field,
.new-variant-adding .tag-field,
.new-variant-adding .min-level-field,
.new-variant-adding .note-field,
.new-variant-adding .total-value,
.new-variant-adding .parent-name-field {
	padding: 10px;
}

.item-edit .item-name-field,
.item-edit .quantity-field,
.item-edit .min-level-field,
.item-edit .price-field,
.item-edit .total-value,
.item-edit .tag-field,
.item-edit .note-field,
.item-adding .item-name-field,
.item-adding .quantity-field,
.item-adding .min-level-field,
.item-adding .price-field,
.item-adding .total-value,
.item-adding .tag-field,
.item-adding .note-field,
.item-adding .variant-checkbox-container,
.variant-adding .item-name-field,
.variant-adding .price-field,
.variant-adding .quantity-field,
.new-variant-adding .item-name-field,
.new-variant-adding .price-field,
.new-variant-adding .quantity-field,
.new-variant-adding .min-level-field,
.new-variant-adding .note-field,
.new-variant-adding .total-value {
	border-bottom: 1px solid #dbdbdb;
	row-gap: 0.25em;
}

.item-edit .item-name-field,
.item-edit .quantity-field,
.item-edit .price-field,
.item-edit .tag-field,
.item-edit .min-level-field,
.item-edit .total-value,
.item-edit .note-field,
.item-adding .item-name-field,
.item-adding .quantity-field,
.item-adding .price-field,
.item-adding .tag-field,
.item-adding .min-level-field,
.item-adding .total-value,
.item-adding .note-field,
.item-adding .variant-checkbox-container,
.item-adding .variant-checkbox-container,
.variant-adding .item-name-field,
.variant-adding .price-field,
.variant-adding .quantity-field,
.new-variant-adding .item-name-field,
.new-variant-adding .price-field,
.new-variant-adding .quantity-field,
.new-variant-adding .tag-field,
.new-variant-adding .note-field,
.new-variant-adding .parent-name-field {
	border-left: 1px solid #dbdbdb;
}

.item-edit .min-level-field,
.item-edit .item-name-field,
.item-edit .total-value,
.item-edit .tag-field,
.item-edit .note-field,
.item-adding .min-level-field,
.item-adding .item-name-field,
.item-adding .total-value,
.item-adding .tag-field,
.item-adding .note-field,
.item-adding .variant-checkbox-container,
.item-adding .variant-checkbox-container,
.variant-adding .item-name-field,
.new-variant-adding .item-name-field,
.new-variant-adding .price-field,
.new-variant-adding .quantity-field,
.new-variant-adding .min-level-field,
.new-variant-adding .tag-field,
.new-variant-adding .note-field,
.new-variant-adding .total-value,
.new-variant-adding .parent-name-field {
	border-right: 1px solid #dbdbdb;
}

.item-edit .item-name-field,
.item-adding .item-name-field,
.variant-adding .item-name-field,
.new-variant-adding .item-name-field,
.new-variant-adding .quantity-field,
.new-variant-adding .min-level-field,
.new-variant-adding .note-field {
	border-top: 1px solid #dbdbdb;
}

.item-edit .tag-field,
.item-adding .tag-field,
.new-variant-adding .tag-field {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 0.5em;
}

.item-edit .tag-field .tag-checkbox-container,
.item-adding .tag-field .tag-checkbox-container,
.new-variant-adding .tag-field .tags-checkbox-container {
	max-height: 100px;

	display: flex;
	flex-direction: column;
	gap: 0.5em;

	overflow: auto;
}

.item-edit .tag-field label,
.item-adding .tag-field label,
.new-variant-adding .tag-field label {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.item-edit .tag-field label,
.item-adding .tag-field label,
.new-variant-adding .tag-field label {
	font-size: 1em;
	color: #3a3d44;
}

.item-edit .note-field,
.item-adding .note-field,
.new-variant-adding .note-field {
	grid-column: 1 / 3;

	display: flex;
	flex-direction: column;
}

.item-edit .note-field textarea,
.item-adding .note-field textarea,
.new-variant-adding .note-field textarea {
	resize: none;
	height: 200px;
	padding: 1.25em;
}

.item-edit .error-message,
.item-adding .error-message,
.variant-adding .error-message,
.item-quantity-edit .error-message,
.new-variant-adding .error-message {
	grid-column: 1 / -1;
	font-size: 0.75em;
	color: red;
}

.variant-checkbox-container {
	grid-column: 1 / -1;
	height: 8em;

	display: flex;
	flex-direction: column;
}

.variant-checkbox-container label {
	display: flex;
	gap: 0.25em;
}

.variants-container div {
	max-width: 120px;
	width: auto;
}

/* Variant Adding Page */
.variant-adding .variant-creation-container {
	max-width: 500px;

	background-color: white;
	border-radius: 0.5em;
	padding: 1.5em;

	display: grid;
	align-content: start;
	gap: 1em;

	overflow: auto;
}

.variant-adding button {
	background-color: #eaeaea;
	padding: 0.5em;
	border: 0px;
	border-radius: 0.5em;
}

.variant-adding .add-variant-button {
	flex: 0;
	justify-self: end;
}

.variant-adding .variant-input-section {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.variant-adding .item-name-field,
.variant-adding .delete-variant-input-section-button {
	grid-column: 1 / -1;
}

.variant-adding h2 {
	grid-column: 1 / -1;
	font-size: 1.25em;
	border: 1px solid #dbdbdb;
	border-bottom: 0px;
}

.variant-adding .delete-variant-input-section-button {
	margin-top: 10px;
}

.variant-adding .delete-variant-input-section-button:hover {
	background-color: #ff4e4e;
	color: white;
}

.new-variant-adding .parent-name-field {
	grid-column: 1 / -1;
}

/* Inventory-summary page */

.inventory-summary,
.low-stock {
	gap: 1em;
}

.inventory-summary .table-container,
.low-stock .table-container {
	padding: 1em;
}

.inventory-summary .header,
.items-edit .header,
.tags .header,
.item-quantity-edit .header,
.activity-history .header,
.transactions .header,
.tags .header,
.tags-edit .header,
.reports .header,
.tag .header,
.transaction .header,
.low-stock .header {
	display: flex;
	align-items: center;
	gap: 1em;
}

.inventory-summary .header button,
.item-quantity-edit button,
.items-edit .header button,
.tags-edit .header button,
.activity-history button,
.reports button,
.tag .header button,
.transactions button,
.transaction button,
.low-stock .header button {
	background-color: #eaeaea;
	padding: 1em;
	border: 0px;
	border-radius: 0.5em;
}

.inventory-summary .header button:hover,
.item-quantity-edit button:hover,
.items-edit .header button,
:hover .tags-edit .header button:hover,
.activity-history button:hover,
.reports button:hover,
.tags button:hover,
.tag .header button:hover,
.transactions button:hover,
.transaction button:hover,
.low-stock .header button:hover {
	background-color: #bdbdbd;
	padding: 1em;
	border: 0px;
	border-radius: 0.5em;
}

.inventory-summary .recently-updated-items,
.low-stock .recently-updated-items {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.inventory-summary h2,
.low-stock h2 {
	font-size: 1em;
}

/* Notifications page */

.notification {
	height: 100%;

	display: flex;
	flex-direction: column;
	gap: 0.55em;
	align-content: start;

	padding: 1em;
	background-color: #dbdbdb;
	overflow: auto;
	padding-bottom: 70px;
}

.notification .notifications-container {
	background-color: white;
	height: 100%;
	overflow: scroll;
	border-radius: 0.5em;
}

.notification .notification-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto;
	gap: 1em;
	align-items: center;

	padding: 0.75em;
	border-bottom: 1px solid #eaeaea;
}

.notification .notification-card .item-image {
	width: 80px;
	height: 80px;

	background-color: #bdbdbd;

	object-fit: contain;

	border-radius: 0.25em;

	grid-column: 1 / 2;
	grid-row: 1 / 2;
}

.notification .notification-card .message {
	grid-column: 2 / 3;
	grid-row: 1 / 2;

	word-break: break-word;
}

.item-quantity-edit {
	align-content: start;
	grid-template-rows: auto auto 1fr;
	gap: 0em;
}

.item-quantity-edit .items-container {
	max-width: 500px;
	margin-top: 1em;
	padding: 1em;
	background-color: white;
	border-bottom: 1px solid #eaeaea;
}

.item-quantity-edit .item-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1em;

	padding: 0.75em;
	border: 1px solid #eaeaea;
	border-radius: 0.5em;
	background-color: white;
}

.item-quantity-edit .item-card-text-content {
	display: grid;
	align-content: center;
}

.item-quantity-edit form {
	border-radius: 0px;
	gap: 1em;
}

.item-quantity-edit label {
	font-size: 0.8em;
	color: #838a9d;
}

.item-quantity-edit .item-quantity-editing-section {
	display: flex;
	flex-direction: column;
}

.item-quantity-edit .item-quantity-editing-section button {
	background-color: transparent;
	border: 0px;
}

.item-quantity-edit .item-quantity-editing-section input {
	outline: none;
	border: 0px;
}

.item-quantity-edit .controller {
	display: grid;
	grid-template-columns: auto auto auto;
	justify-content: center;
	justify-items: center;
	grid-template-rows: auto auto;
	row-gap: 0.5em;
}

.item-quantity-edit .controller .controller-label {
	grid-column: 1 / -1;
}

.item-quantity-edit .controller input {
	grid-column: 2 / 3;
	font-size: 2em;
	width: 10ch;
	text-align: center;

	border: 0px;
}
.item-quantity-edit .controller button {
	font-size: 1.75em;
}

.item-quantity-edit .new-quantity-input {
	margin-top: 0.5em;
}

.item-quantity-edit .new-quantity-input,
.item-quantity-edit .reason-field {
	display: flex;
	flex-direction: column;
}

.item-quantity-edit .new-quantity-input input {
	background-color: #eaeaea;
	padding: 0.5em;
	border-radius: 0.25em;
}

.item-quantity-edit select {
	padding: 0.5em;
	border: 0px;
	background-color: #eaeaea;
	outline: none;
}

.item-quantity-edit .update-button {
	background-color: #eaeaea;
	border: 0px;
	padding: 0.5em;
	border-radius: 0.25em;
}

.item-quantity-edit .update-button:hover {
	background-color: #6fe36f;
	color: white;
}

/* Menu page */

.menu {
	height: 100%;

	display: flex;
	flex-direction: column;
	gap: 0.55em;
	align-content: start;

	padding: 1em;
	background-color: #dbdbdb;
	overflow: auto;
	padding-bottom: 70px;
}

.menu .menu-options-container {
	display: grid;
	align-items: center;

	background-color: white;
	border-radius: 0.5em;
	overflow: hidden;
}

.menu .menu-options-container a {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5em;
}

.menu .menu-options-container a:nth-child(1) {
	border-bottom: 1px solid #eaeaea;
}

.menu .menu-options-container .text-content {
	flex: 1;
	display: flex;
	flex-direction: row;
}

.menu .menu-options-container .arrow-container {
	margin-left: auto;
}

.menu a {
	border-radius: 0px;
}

.menu img {
	width: 100%;
}

.menu .menu-option:hover {
	background-color: #eaeaea;
}

.menu .menu-option .icon-container {
	padding-left: 1em;
}

.menu .user-name-card {
	display: grid;
	grid-template-columns: 4em minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-content: center;
	align-items: center;
	background-color: white;
	padding: 1em;
	column-gap: 1em;
	border-radius: 0.5em;
}

.menu .image-container {
	grid-column: 1 / 2;
	grid-row: 1 / 3;

	display: flex;
	align-items: center;
}

.menu .user-name {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	align-self: end;
	font-size: 1.5em;
}

.menu .user-email {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	align-self: start;
	color: #838a9d;
}

.menu .menu-options-container .menu-option .text-content {
	padding-top: 1em;
	padding-bottom: 1em;
	padding-right: 1em;
}

/* Activity History Page */
.activity-history {
	height: 100%;

	display: flex;
	flex-direction: column;
	gap: 0.55em;
	align-content: start;

	padding: 1em;
	background-color: #dbdbdb;
	overflow: auto;
	padding-bottom: 70px;
}

.activity-history .activities-container {
	border-radius: 0.5em;
	overflow: scroll;
	background-color: white;
}

.activity-history .activity-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	padding: 1em;
	background-color: white;
	border-top: 1px solid #eaeaea;
	row-gap: 0.5em;
	border-radius: 0px;
}

.activity-history .activity-card:hover {
	background-color: #eaeaea;
}

.activity-history h2 {
	grid-column: 1 / 2;
	font-size: 1em;
}

.activity-history p {
	grid-column: 1 / -1;
	grid-row: 2 / 3;
	word-break: break-word;
	font-size: 0.9em;
}

.activity-history .time-passed {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	font-size: 0.75em;
}

/* Transactions page */
.transactions,
.transaction,
.search {
	height: 100%;

	display: flex;
	flex-direction: column;
	gap: 0.55em;
	align-content: start;

	padding: 1em;
	background-color: #dbdbdb;
	overflow: auto;
	padding-bottom: 70px;
}

.transactions .transactions-container {
	height: 100%;
	border-radius: 0.5em;
	overflow: scroll;
	background-color: white;
}

.transactions .item-update {
	color: #4dc94d;
}

.transactions .transaction-card {
	display: grid;
	padding: 1em;
	padding-left: 1.75em;
	padding-right: 1.75em;
	background-color: white;
	border-bottom: 1px solid #eaeaea;
	row-gap: 0.5em;
	border-radius: 0px;
}

.transactions .transaction-card:hover {
	background-color: #eaeaea;
}

.transactions .item-update.negative {
	color: #ff4e4e;
}

.transactions .transaction-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
}

.transactions .transaction-header {
	display: flex;
	justify-content: space-between;
	gap: 0.5em;
}

.transactions .transaction-date,
.transactions .transaction-type {
	color: #838a9d;
	font-size: 0.75em;
}

/*  Transaction page */
.transaction .transaction-description {
	background-color: white;
	padding: 1em;
	border-radius: 0.5em;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.transaction .transaction-description > div {
	display: grid;
	grid-template-columns: 4em auto;
	justify-content: space-between;
}

.transaction .transaction-item {
	padding: 0.5em;
	border-radius: 0.5em;
	margin-top: 0.5em;
	background-color: #eaeaea;
	width: fit-content;
	max-width: 10em;
}

.transaction .transaction-item:hover {
	background-color: #dbdbdb;
}

/* Search Page */
.search .items-container {
	height: 100%;
	align-content: start;
	background-color: white;
	border-radius: 0.5em;
	overflow: auto;
}

.search .search-field,
.tag .search-field,
.tags-edit .search-field,
.tags .search-field {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	border-radius: 0.5em;
	background-color: white;
	padding: 0.5em;
	padding-right: 1em;
	padding-left: 1em;
	gap: 0.5em;
}

.search .search-field button,
.tags .search-field button,
.tags-edit .search-field button,
.tag .search-field button {
	border: 0px;
	background-color: transparent;
	font-size: 1.15em;
	color: #838a9d;
}

.search .search-field input,
.tags .search-field input,
.tags-edit .search-field input,
.tag .search-field input {
	border: 0px;
	font-size: 1.15em;
	outline: none;
}

.search .search-field svg,
.tag .search-field svg,
.tags-edit .search-field svg,
.tags .search-field svg {
	fill: black;
	display: flex;
}

.search .search-default-message div,
.tag .search-default-message div,
.tags-edit .search-default-message div,
.tags .search-default-message div {
	font-size: 1.5em;
}

/* Reports page */
.reports {
	height: 100%;

	display: flex;
	flex-direction: column;
	gap: 0.55em;
	align-content: start;

	padding: 1em;
	background-color: #dbdbdb;
	overflow: auto;
	padding-bottom: 70px;
}

.reports .report-item {
	padding: 1em;
	border-radius: 0.5em;
	background-color: white;
	display: grid;
	column-gap: 0.75em;
	row-gap: 0.25em;

	grid-template-columns: auto auto;
	align-items: start;
	justify-content: start;
}

.reports .report-item:hover {
	background-color: #eaeaea;
}

.reports .report-item h2,
.reports p {
	grid-column: 2 / 3;
}

.reports .report-item .icon-container {
	grid-row: 1 / 3;
}

.reports .report-item h2 {
	font-size: 1em;
}

.reports .report-item p {
	font-size: 0.9em;
}

/* Tags page */
.tags {
	position: relative;
	height: 100%;

	display: flex;
	flex-direction: column;
	gap: 0.55em;
	align-content: start;

	padding: 1em;
	background-color: #dbdbdb;
	overflow: auto;
	padding-bottom: 70px;
}

.tags .header button {
	padding: 0.5em;
}

.tags .search-field button {
	padding: 0em;
}

.tags .search-field input {
	font-size: 1em;
}

.tags .tag-card {
	padding: 1em;
	background-color: white;
	display: grid;
	grid-template-columns: 80% minmax(0, 1fr);
	justify-content: space-between;
	border-radius: 0.5em;
}

.tags .tag-card:hover {
	background-color: #bdbdbd;
}
.tags .arrow-container {
	justify-self: end;
}

.tags h2 {
	font-size: 1em;
}

.background-overlay .add-tag-form {
	position: absolute;
	left: 0;
	right: 0;
	top: 50dvh;
	margin-inline: auto;

	max-width: 400px;

	padding: 1em;
	border-radius: 0.5em;
	background-color: white;

	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto auto;
	justify-content: center;
	gap: 1em;
}

.background-overlay .add-tag-form input {
	grid-row: 2 / 3;
	grid-column: 1 / -1;
	background-color: #eaeaea;
	border: 0px;
	border-radius: 0.5em;
	padding: 0.5em;
	outline: none;
}

.background-overlay .add-tag-form button {
	grid-row: 3 / 4;
}

.tag {
	height: 100%;
	position: relative;

	display: flex;
	flex-direction: column;
	gap: 0.55em;
	align-content: start;

	padding: 1em;
	background-color: #dbdbdb;
	overflow: auto;
	padding-bottom: 70px;
}

.tag-summary-container {
	padding: 1em;
	border-radius: 0.5em;
	background-color: white;
}

/* Edit items page */
.items-edit,
.tags-edit {
	height: 100%;

	display: flex;
	flex-direction: column;
	gap: 0.55em;
	align-content: start;

	padding: 1em;
	background-color: #dbdbdb;
	overflow: auto;
	padding-bottom: 70px;
}

.items-edit form,
.tags-edit .delete-tag-form {
	display: flex;
	flex-direction: row;
	padding: 1em;
	gap: 0.5em;
	background-color: white;
	border-radius: 0.5em;
}

.tags-edit .delete-tag-form button,
.items-edit .delete-item-button {
	border: 0px;
	padding: 0.5em;
	background-color: #eaeaea;
	font-size: 0.75em;
	border-radius: 0.5em;
}

.items-edit .delete-item-button:hover,
.tags-edit .delete-tag-form button:hover {
	background-color: #f73535;
}

.items-edit svg,
.tags-edit svg {
	stroke: #163300;
}

.items-edit .delete-item-button:hover svg,
.tags-edit .delete-tag-form button:hover svg {
	stroke: white;
}

a:hover > button {
	background-color: #bdbdbd;
}

.item-card:hover,
.insight-card:hover {
	background-color: #f5f5f5;
}

.tags-edit select {
	padding: 0.5em;
	border-radius: 0.5em;
	border: 0px;
	outline: none;
}

.items-edit .items-container,
.tags-edit .tags-container {
	display: grid;
	gap: 1em;
	grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}

.items-edit form,
.tags-edit .delete-tag-form {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	justify-content: space-between;
}

.items-edit .add-item-button {
	background-color: #eaeaea;
	padding: 1em;
	border: 0px;
	border-radius: 0.5em;
}

.items-edit .search-default-message {
	display: grid;
	gap: 0.5em;
}

.error {
	height: 100%;

	display: grid;
	flex-direction: column;
	gap: 0.55em;
	align-content: center;
	justify-items: center;

	padding: 1em;
	background-color: #dbdbdb;
	overflow: auto;
	padding-bottom: 70px;
}

.error .error-message {
	display: grid;
	justify-items: center;
	gap: 0.5em;
}

.error .error-message button {
	background-color: #eaeaea;
	padding: 0.5em;
	border: 0px;
	border-radius: 0.5em;
}