@import 'src/Components/GlobalStyles/colors';
@import 'src/Components/GlobalStyles/mixins';

.selectMonth,
.selectYear {
	label {
		//position: absolute;
		//top: -15px;
	}

	div {
		&::before {
			border: none;
		}
	}

	svg {
		color: var(--primary-color);
		position: absolute;
		top: -5px;
	}
}

.formContainer {
	padding: 100px;
	width: 860px;
	margin: 0 auto;
	background-color: $light-grey;

	@media (max-width: 1200px) {
		width: auto;
	}

	h3 {
		text-align: center;
	}

	.form {
		.inputLabel {
			white-space: nowrap;
			width: 200px;
		}

		svg {
			transition: all 0.2s ease-in-out;

			&:hover {
				cursor: pointer;
			}
		}
	}

	.financialsInput {
		//margin-top: 19px;
		// TODO this was request from client to have more room, but Dejan said
		// TODO that there should not be that big margin (consult about this)
		display: grid;
		width: 492px;
		grid-template-columns: 60px 200px 108px 108px;
		justify-content: end;
		align-items: center;
		text-align: start;
		margin-left: auto;

		svg {
			margin: 20px 0 8px;
		}

		.selectMonth,
		.selectYear {
			padding: 0;
			min-width: 80px;
			position: relative;

			svg {
				position: absolute;
				top: -15px;
				right: 10px;
			}
		}

		button {
			margin: 16px 0 0;
			padding: 0;

			svg {
				margin: 0;
			}
		}

		&__month {
			margin: 25px 51px 8px 11px;
			white-space: nowrap;
			width: 155px;
		}

		@media (max-width: 1000px) {
			width: 400px;
			grid-template-columns: 60px 194px 1fr 100px;
		}

		@media (max-width: 780px) {
			width: 300px;
			grid-template-columns: 60px 154px 1fr 100px;
		}
	}

	.horizontalLine {
		@include HorizontalLine;

		background-color: var(--primary-color);
		margin: 15px 0 0;
	}

	h5 {
		margin: 26px auto 2px;
		font-size: 18px;
		font-weight: 400;
		color: var(--primary-color);
	}

	.balanceSheetTitle {
		margin-top: 100px;
	}

	.submitCancelButton,
	.backToFinancialsButtonWrapper {
		display: flex;
		justify-content: flex-end;
		margin-top: 100px;
		gap: 20px;

		.submitButton,
		.backToFinancialsButton {
			text-transform: capitalize;
			font-weight: 800;
			font-size: 18px;
			padding: 15px 69px;
			background-color: var(--primary-color);
			border-radius: 10px;

			.saveButtonIcon {
				margin-right: 10px;
				text-transform: lowercase !important;
			}

			&:hover {
				background-color: var(--primary-color-dark) !important;
			}
		}

		.cancelButton {
			color: grey;
			padding: 15px 69px;
			border-radius: 10px;
			text-transform: capitalize;
			font-weight: 800;
			font-size: 18px;

			&:hover {
				background-color: var(--primary-color);
				color: $light-grey;
			}
		}

		.backToFinancialsButton {
			color: white;
		}
	}

	.backToFinancialsButtonWrapper {
		justify-content: center;
	}
}

.inputContainer {
	font-size: 16px;
	font-weight: 400;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-top: 25px;
	margin-right: 17px;
	position: relative;

	.arrowUp {
		transform: rotateX(180deg);
		margin: 0 8px 0 25px;
		cursor: pointer;

		@media (max-width: 1000px) {
			margin: 0;
		}
	}

	.arrowDown {
		cursor: pointer;
	}

	button {
		margin: 0 0 2px;
		padding: 0;
	}

	input::placeholder {
		color: rgb(171, 171, 171); /* Sets the placeholder text color */
	}

	.currencyWrapper {
		// &::before {
		// 	content: var(--current-company-currency);
		// 	position: absolute;
		// 	display: block;
		// }

		input {
			text-align: right;
			padding: 0 3px 0 10px;
			min-width: 40px;
			max-width: 140px;
		}
	}

	input[type='number'] {
		appearance: textfield;
		min-width: 40px;
		max-width: 110px;
		border: none;
		border-bottom: 1px solid $black;
		outline: none;

		@media (max-width: 1000px) {
			min-width: 10px;
			max-width: 80px;
		}
	}

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

	label {
		display: block;
		width: 200px;
		margin-right: 44px;
	}
}

.errorCogs,
.errorDirectLabour,
.errorBankLoansCurrent,
.errorBankLoansNonCurrent,
.errorDeferredRevenue,
.errorMonthEnding,
.errorMonthStart,
.errorBanksLendEBITDAMultiplierMax,
.errorYearStart,
.errorYearEnding,
.errorTradeDebtors,
.errorTradeCreditors,
.errorStock,
.errorRevenue,
.errorOtherIncome,
.errorNetProfit,
.errorInterestPaid,
.errorIncreaseRevenueBy,
.errorGrossProfit,
.errorEBIT,
.errorDividends,
.errorDepreciation,
.errorDeferredRevenue,
.errorCashAtBank,
.errorTotalLiabilities,
.errorTotalCurrentAssets,
.errorTotalCurrentLiabilities,
.errorTotalAssets,
.errorFixedAssets {
	border: 1px solid red !important;
}