@charset "UTF-8";

* {
	font-family: 'Manrope', sans-serif;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
	--blue-color: #61B0FF;
	--light-purple-color: #f7e6ff;
	--purple-color: #B65CDA;
	--light-green-color: #f1fff9;
	--green-color: #47B988;
	--red-color: #F3373A;
	--light-yellow-color: #FFF3D4;
	--yellow-color: #d35400;
	--text-color: #273445;
	--light-blue-color: #F9FAFC;
	--gray-color: #B1B6C4;
	--border-color: #ECEDEF;
	--primary-color: #FFFFFF;
}

i:hover{
	color: var(--blue-color);
	cursor: pointer;
}


*:focus {
	outline: none;
}

a {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

h2{
	font-size: 24px;
	font-weight: 900;
}

h3{
	margin-block: 15px;
}

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

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

select{
	background: none;
	border: none;
	color: var(--text-color);
	font-size: 14px;
	font-weight: 600;
	-webkit-appearance: none;
}

textarea{
	background: var(--primary-color);
	border: 2px solid var(--border-color);
	border-radius: 12px;
	height: 140px;
	padding: 10px;
	resize: none;
	color: var(--text-color);
}

input[type=text], input[type=password],input[type=date] {
	border: none;
	background: none;
	color: var(--text-color);
	font-size: 14px;
}


::-webkit-scrollbar{
	display: none;
}

body{
	background: var(--light-blue-color);
	color: var(--text-color);
	overflow-x: hidden;
}

.search-bar{
	width: calc(100vw - 40px);
	height: 100%;
	display: grid;
	grid-template-columns: 28px auto; 
	align-items: center;
	background: var(--primary-color);
	padding: 8px 12px;
	border-radius: 12px;
	box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
	margin-bottom: 20px;
	
	button {
		border: none;
		
	}
}

/* LOGIN */

.login{
	width: 300px;
	padding: 14px;
	background: var(--primary-color);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 12px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	
	input[type=text], input[type=password]{
		background: var(--light-blue-color);
		padding: 10px 12px;
		margin-bottom: 14px;
		font-size: 14px;
		border-radius: 12px;
		font-weight: 500;
	}
	
	button{
		outline: none;
		background: var(--blue-color);
		color: #FFFFFF;
		border: none;
		width: 100%;
		padding-block: 10px;
		border-radius: 12px;
		font-weight: 600;
		font-size: 14px;
		cursor: pointer;
		text-transform: uppercase;
	}
}

/* LOGIN END */

header{
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	position: fixed;
	top: 0;
	left: 0;
	background: var(--primary-color);
	height: 60px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-inline: 20px;
	z-index: 1;
	i{
		font-size: 18px;
	}
	
	.action-buttons{
		display: flex;
		align-items: center;
		justify-content: end;
		gap: 20px;
	}
}

nav{
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1;
	background: var(--primary-color);
	height: 60px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	.item{
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 8px 12px;
		span{
			display: none;
		}
	}
	
	i{
		font-size: 17px;
	}
	
	.item.active{
		background: var(--text-color);
		border-radius: 18px;
		color: var(--primary-color);
		span{
			display: block;
			font-size: 14px;
			font-weight: 500;
		}
	}
}


main{
	position: absolute;
	top: 60px;
	left: 0;
	padding: 20px 20px 60px;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	
	.table{
		margin-block: 20px;
		display: none;
		flex-direction: column;
		background: var(--primary-color);
		border-radius: 12px;
		box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
		.row{
			border-bottom: 1px solid var(--border-color);
			display: flex;
			flex-direction: column;
			padding: 8px 14px;
			position: relative;
			span:first-child{
				font-size: 14px;
				font-weight: 600;
			}
			span:last-child{
				font-size: 13px;
				font-weight: 500;
				opacity: 0.8;
			}
		}
		
		.row.selected::after{
			content: '';
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 10px;
			width: 14px;
			aspect-ratio:1;
			background: var(--text-color);
			border-radius: 50%;
		}
		
		
		.row:last-child{
			border: none;
		}
	}
	
	.product-table{
		margin-bottom: 20px;
		display: flex;
		flex-direction: column;
		background: var(--primary-color);
		border-radius: 12px;
		box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
		.row{
			border-bottom: 1px solid var(--border-color);
			display: flex;
			justify-content: space-between;
			gap: 5px;
			padding: 8px 14px;
			
			span{
				font-size: 13px;
				font-weight: 500;
				opacity: 0.8;
			}
			
			select{
				text-align-last: right;
				width: 100%;
			}
			
			input[type=text]{
				text-align: right;
			}
		}
		
		
		.row:last-child{
			border: none;
		}
	}
	
	.action-buttons{
		width: 100%;
		display: grid;
		align-items: center;
		grid-template-columns: 13% 13% 13% auto;
		gap: 15px;
		
		span{
			background: var(--text-color);
			color: var(--primary-color);
			padding-block: 8px;
			text-align: center;
			border-radius: 12px;
			font-size: 14px;
			font-weight: 600;
		}
		
		i{
			background: var(--primary-color);
			padding-block: 8px;
			text-align: center;
			box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
			border-radius: 10px;
		}
		
		.turnon{
			background: var(--green-color);
			color: var(--primary-color);
			box-shadow: none;
		}
	}
	
	.action-buttons.small{
		width: 100%;
		display: grid;
		align-items: center;
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
		
		span{
			background: var(--text-color);
			color: var(--primary-color);
			padding-block: 8px;
			text-align: center;
			border-radius: 12px;
			font-size: 14px;
			font-weight: 600;
		}
		
		i{
			background: var(--primary-color);
			padding-block: 8px;
			text-align: center;
			box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
			border-radius: 10px;
		}
		
		.turnon{
			background: var(--green-color);
			color: var(--primary-color);
			box-shadow: none;
		}
	}
	
	.product-bubble{
		width: 100%;
		display: flex;
		flex-direction: column;
		background: var(--primary-color);
		border-radius: 12px;
		box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
		margin-bottom: 20px;
		.up{
			display: flex;
			padding: 8px 14px;
			border-bottom: 1px solid var(--border-color);
			span{
				font-size: 14px;
				font-weight: 600;
			}
		}
		
		.bottom{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 8px 14px;
			span{
				font-size: 13px;
				font-weight: 500;
			}
		}
	}
}