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

.formContainer {
	margin: 30px auto;

	strong {
		font-family: 'ProximaNW01-Bold', sans-serif !important;
		font-weight: 700;
	}

	p {
		margin: 0 !important;
	}

	.tableHead,
	.tableHeadLast,
	.tableTitle,
	.tableTitle2,
	.tableTitle3,
	.tableTitleLast,
	.tableFooter1,
	.tableFooter2,
	.tableFooter3,
	.tableFooter4,
	.tableFooter5,
	.tableFooterTitle,
	.tableHeadWorkingMetric,
	.tableHeadFinancialReturn {
		display: grid;
		grid-template-columns: 1fr 110px 100px;
		background-color: rgba($primary, 0.13);
		padding: 15px 20px;
		gap: 50px;
		text-align: end;
		text-transform: capitalize;

		@media (max-width: 1000px) {
			padding: 10px 5px;
			gap: 30px;

			p {
				margin: 0 !important;
			}
		}
	}

	.tableHead,
	.tableHeadLast,
	.tableFooter3,
	.tableFooter4,
	.tableFooter5,
	.tableFooter1,
	.tableHeadWorkingMetric,
	.tableHeadFinancialReturn {
		font-weight: 600;

		p:first-child {
			text-align: start;
		}
	}

	.inputContainerLast {
		border-bottom: 1px dashed #c3c3c4;
		grid-template-columns: 1fr 120px 200px 100px 100px;
		justify-items: start;
		align-items: start;
		gap: 20px;
	}

	.tableHead {
		@media (max-width: 1000px) {
			gap: 20px;
		}
	}

	// title above red stipe table header title
	.tableTitle,
	.tableTitle2,
	.tableTitle3,
	.tableTitleLast,
	.tableFooterTitle {
		background-color: white;

		@media (max-width: 1000px) {
			gap: 10px;
			margin-right: 5px;

			p:first-of-type {
				width: 345px;
			}
		}

		p {
			white-space: nowrap;
			margin: 0 !important;
			text-align: right;
		}
	}

	.tableFooter5 {
		grid-template-columns: 1fr 1fr 100px 100px;
	}

	.tableFooterTitle {
		@media (max-width: 1000px) {
			gap: 0;

			p:first-of-type {
				width: 390px;
			}
		}

		p {
			// white-space: nowrap;
			margin: 0 !important;
			text-align: right;
		}
	}

	.tableTitle3 {
		margin-bottom: 0;
		grid-template-columns: 1fr 100px 100px 100px;
	}

	.tableTitle2 {
		margin-bottom: 0;
		padding-bottom: 0;
	}

	.tableFooter1 {
		background-color: $light-grey;
		// margin-top: 10px;
		// margin-bottom: 50px;

		@media (max-width: 1000px) {
			gap: 20px;

			p:first-of-type {
				width: 400px;
			}
		}
	}

	.tableFooter2 {
		&__adjustedPosition {
			text-align: start;
			font-weight: 700;
		}

		p {
			font-weight: 600;
		}

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

			p:first-of-type {
				width: 90%;
			}
		}
	}

	.popup {
		margin-top: 15px;
		padding: 5px;
		font-size: 0.725rem;
		// background-color: rgba(144, 190, 4, 0.13);
		border: 1px solid var(--primary-color);
		color: var(--primary-color);
	}

	.totalImpactTip {
		font-size: 0.925rem;
		margin: 10px 0 50px;
	}

	.inputContainer,
	.inputContainerLast,
	.inputContainerFunding,
	.inputContainerCapital,
	.inputContainerCashFlowMetric,
	.tableEnd,
	.inputContainerWorkingCapitalDays,
	.inputContainerWorkingCapitalTimeline,
	// .inputContainerNote,
	.bold {
		display: grid !important;
		grid-template-columns: 1fr 1fr 100px 100px;
		gap: 50px;
		justify-items: end;
		align-items: end;
		padding: 25px 20px 0;
		padding: 15px 20px;
		flex-wrap: nowrap;

		@media (max-width: 1000px) {
			padding: 0 5px;
			gap: 30px;

			p {
				// white-space: nowrap;
				margin: 0 !important;
				text-align: right;
			}
		}

		label {
			white-space: nowrap;

			@media (max-width: 1000px) {
				white-space: break-spaces;
			}
		}

		@include inputWithArrows;

		.percentageSign {
			padding: 0 10px;
			display: inline-block;
			min-width: 42.15px;
			text-align: center;

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

	.inputContainer {
		// border-bottom: 1px dashed rgb(202 30 102 / 30%);
		border-bottom: 1px dashed $font-light-grey;
		//box-shadow: 0 3px 13px 0 rgba(75, 0, 0, 0.2);

		@media (max-width: 1000px) {
			display: flex;
			justify-content: flex-start;

			p:nth-child(3) {
				width: 80px;
				text-align: end;
			}

			div:nth-child(2) {
				width: 100px;
			}
		}

		p {
			margin: 0;
		}
	}

	.inputContainerWorkingCapitalTimeline {
		background-color: $light-grey;
		// border-bottom: 1px solid var(--primary-color);
		border-bottom: 1px dashed $font-light-grey;
		//box-shadow: 0 3px 13px 0 rgba(75, 0, 0, 0.2);

		@media (max-width: 1000px) {
			display: flex;
			justify-content: flex-start;

			p:nth-child(3) {
				width: 80px;
				text-align: end;
			}

			div:nth-child(2) {
				width: 100px;
			}
		}

		p {
			margin: 0;
		}
	}

	.bold {
		font-weight: 600;
	}

	.tableFooter3,
	.tableFooter4 {
		margin-top: 30px;
	}

	.tableFooter4,
	.tableFooter5 {
		padding: 10px 25px;

		p {
			margin: 0;
		}
	}

	.tableHead,
	.tableHeadWorkingMetric,
	.tableHeadFinancialReturn {
		grid-template-columns: 1fr 100px 100px;

		p {
			// white-space: nowrap;
			margin: 0 !important;
			text-align: right;
		}

		label {
			text-align: start;
		}
	}

	.tableHeadWorkingMetric,
	.tableHeadFinancialReturn {
		grid-template-columns: 1fr 100px 100px 100px;
	}

	.tableHeadFinancialReturn {
		// grid-template-columns: 1fr 100px 100px 100px;
		grid-template-columns: 180px 100px 180px 100px 100px;
		grid-template-columns: 200px 110px 200px 110px 110px;
		padding-left: 20px;
		padding-right: 20px;
		gap: 20px;
	}
	.tableHeadLast {
		grid-template-columns: 310px 120px 100px 30px 100px;
		// grid-template-columns: 290px 120px 100px 30px 100px;
		// grid-template-columns: 1fr 100px 100px;
		grid-template-columns: 180px 100px 180px 100px 100px;
		grid-template-columns: 200px 110px 200px 110px 110px;
		padding-left: 20px;
		padding-right: 20px;
		gap: 20px;
		margin-top: 50px;
		text-align: start;

		label {
			text-align: start;
		}

		p:nth-child(4) {
			white-space: nowrap;
		}
	}

	.inputContainerLast,
	.inputContainerFunding,
	.inputContainerCapital {
		// border-bottom: 1px dashed rgb(202 30 102 / 30%);
		border-bottom: 1px dashed $font-light-grey;
		// grid-template-columns: 1fr 120px 200px 100px 130px;
		grid-template-columns: 1fr 120px 200px 100px 100px;
		grid-template-columns: 200px 110px 200px 110px 110px;
		grid-template-columns: 200px 110px 200px 110px 110px;
		padding-top: 15px;
		padding-bottom: 15px;
		padding-left: 20px;
		// padding-right: 40px;
		justify-items: start;
		align-items: start;
		gap: 20px;

		@media (max-width: 1000px) {
			grid-template-columns: 1fr 120px 200px 100px 1fr;
		}

		p {
			// white-space: nowrap;
			margin: 0 !important;
			text-align: right;

			&:nth-child(2),
			&:nth-child(4),
			&:nth-child(5) {
				justify-self: end;
			}

			&:nth-child(5) {
				text-align: end;
			}

			&:nth-child(2) {
				padding-right: 20px;
			}
		}

		label {
			margin: 0;
		}
	}

	.lastLabel {
		font-weight: 600;
	}

	.subTitleLastTable {
		text-align: center;
	}

	.inputContainerFunding,
	.inputContainerWorkingCapitalDays {
		background-color: $grey-hr;
	}

	@media (max-width: 1000px) {
		.inputContainerFunding {
			grid-template-columns: 1fr 120px 200px 100px 1fr;
			gap: 20px;
		}
	}

	.inputContainerCapital,
	.inputContainerCashFlowMetric {
		// border-bottom: 1px solid var(--primary-color);
		border-bottom: 1px dashed $font-light-grey;
	}

	.formulaImage {
		text-align: center;
		margin: 30px auto 20px;

		h4 {
			margin-bottom: 30px;
		}
	}

	.tableEnd {
		border-bottom: 1px solid rgb(0 0 0 / 20%);
		margin-bottom: 10px;
	}
}

.netCashFlow,
.ebit {
	margin: 0;
}

.inputContainerNote {
	padding: 5px;
	display: grid;
	grid-template-columns: 60% 100px 100px;
	gap: 30px;
}

.tableTitleReturns {
	display: grid;
	grid-template-columns: 1fr 170px 150px 100px;
	text-align: right;
	padding: 0 20px;
}

.tableHeaderReturns {
	display: grid;
	grid-template-columns: 1fr 170px 150px 100px;
	text-align: right;
	background-color: rgba(144, 190, 4, 0.13);
	padding: 15px 20px;
	text-align: end;
	// text-transform: capitalize;
}

.valueContainer {
	display: grid;
	grid-template-columns: 1fr 170px 150px 100px;
	text-align: right;
	padding: 15px 20px;
	text-align: end;
	border-bottom: 1px dashed #c3c3c4;

	&.rowEmphasis {
		border-bottom: 1px solid #c3c3c4;
	}

	&.borderTop {
		border-top: 1px dashed #c3c3c4;
	}

	label {
		text-align: left;
	}
}

.formContainer {
	&.print {
		.inputContainerLast,
		.inputContainerCapital,
		.tableHeaderReturns,
		.valueContainer {
			padding-top: 0;
			padding-bottom: 0;
		}
	}
}

.red {
	color: red;
}

.green {
	color: rgb(64, 122, 65);
}