@import '../../../../Components/GlobalStyles/chartColors.scss';
.container {
	border: 5px solid #6c297e;
	border-radius: 10px;
	width: 100%;
	background-color: #6c297e90;
	padding: 35px 50px;
	color: white;
	text-align: center;

	h3 {
		font-size: 1.25em;
	}

	p {
		font-size: 2.188em;
	}
}

.finance-card {
	width: 280px;
	border-radius: 16px;
	padding: 20px;
	color: #fff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	.card-header {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-weight: 600;
		font-size: 1.25em;
		margin-bottom: 10px;

		.card-icon {
			position: absolute;
			// top: 20px;
			// right: 20px;
			width: 48px;
			height: 48px;
			position: relative;
			text-align: right;

			svg {
				width: 48px;
				height: 48px;
				padding: 10px;
				background: rgba(0, 0, 0, 0.3);
				border-radius: 90px;
			}
		}
	}

	.card-value {
		font-size: 2em;
		font-weight: bold;
	}

	&.purple {
		background: linear-gradient(135deg, #a855f7, #6b21a8);
	}

	&.gradient-rainbow {
		background: $gradient-rainbow;
	}

	&.lime-gradient {
		background: $gradient-lime;
	}

	&.green-to-red-gradient {
		background: $green-to-red-gradient-angled;
	}

	&.cool-gray-gradient {
		background: $gradient-cool-gray;
	}

	&.gradient-blue {
		background: $gradient-blue-angled;
	}

	&.red {
		background: linear-gradient(135deg, #f43f5e, #b91c1c);
	}

	&.green {
		background: linear-gradient(135deg, #10b981, #065f46);
	}

	&.yellow {
		background: linear-gradient(135deg, #f59e0b, #b45309);
	}

	&.surplus {
		// border: 2px solid var(--cc-primary);
		background: linear-gradient(135deg, var(--cc-primary-light) 8%, var(--cc-primary) 65%);
		color: var(--cc-primary);
		color: #ffffff;
	}

	&.shortfall {
		// border: 2px solid #dc2626;
		background: linear-gradient(135deg, var(--cc-red-light) 8%, var(--cc-red) 65%);
		color: var(--cc-red);
		color: #ffffff;
	}
}