@import "../constants.scss";

.cleanup.section {
	padding: 25px;
	border-radius: 5px;
	background-color: #fff;
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
	margin-top: 1rem;

	// Header Section
	.section-header {
		h2 {
			font-size: 1.5rem;
			font-weight: 600;
			color: $main-font-color;
			display: flex;
			align-items: center;

			i {
				color: $main-theme-color;
			}

			.badge {
				font-size: 0.65rem;
				vertical-align: middle;
			}
		}

		p {
			color: #555;
			line-height: 1.6;
			font-size: 14px;
			margin-bottom: 0;
		}
	}

	// Progress Bar
	.progress {
		border-radius: 0.5rem;
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		.progress-bar {
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			font-weight: 600;
			font-size: 0.9rem;
			transition: width 0.4s ease;
			display: flex;
			align-items: center;
			justify-content: center;
			min-width: 4%;

		}
	}

	// Settings Group (Shared with Settings page)
	.settings-group {
		padding: 0;
		margin-bottom: 1.5rem;

		label {
			display: block;
			margin-bottom: 7px;
			font-weight: 500;
			color: #444;

			.tooltip-icon {
				margin-left: 0.5rem;
				cursor: help;
				color: #6c757d;
				font-size: 0.85rem;

				&:hover {
					color: #0073aa;
				}
			}
		}

		input[type="text"],
		input[type="email"],
		input[type="number"],
		select,
		textarea {
			display: block;
			width: 100%;
			padding: 0.375rem 0.75rem;
			font-size: 13px;
			font-weight: 400;
			height: 30px;
			line-height: 1.5;
			color: #212529;
			background-color: #fff;
			background-clip: padding-box;
			border: 1px solid #ced4da;
			appearance: none;
			border-radius: 0.25rem;
			transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

			&:focus {
				color: #212529;
				background-color: #fff;
				border-color: #86b7fe;
				outline: 0;
				box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
			}

			&.regular-text {
				max-width: 100%;
				min-width: 250px;
			}

			&:disabled {
				background-color: #f5f5f5;
				color: #6c757d;
				cursor: not-allowed;
				opacity: 0.7;
			}
		}

		select {
			cursor: pointer;
		}

		.form-check-label {
			display: flex;
			align-items: center;
			cursor: pointer;
			font-weight: 500;
			margin-bottom: 0;

			.form-check-input {
				margin-right: 0.75rem;
				&:checked {
					background-color: inherit;
				}
			}

			.tooltip-icon {
				margin-left: 0.5rem;
			}

			&.disabled-group {
				opacity: 0.6;
				cursor: not-allowed;
			}
		}

		.form-text {
			display: block;
			margin-top: 0.5rem;
			font-size: 0.85rem;
		}

		.input-group {
			display: flex;
			align-items: stretch;
			width: 100%;

			input[type="number"],
			input[type="text"] {
				flex: 1;
				min-width: 0;
				width: auto;
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;

				&.regular-text {
					max-width: none;
					min-width: 0;
				}
			}

			.input-group-text {
				display: flex;
				align-items: center;
				padding: 0.375rem 0.75rem;
				font-size: 10px;
				font-weight: 400;
				line-height: 1.5;
				color: #212529;
				text-align: center;
				white-space: nowrap;
				background-color: #e9ecef;
				border: 1px solid #ced4da;
				border-left: none;
				border-top-right-radius: 0.25rem;
				border-bottom-right-radius: 0.25rem;
			}
		}
	}


	// Alert Box
	.alert {
		border-radius: 0.375rem;
		padding: 1rem;
		font-size: 0.9rem;

		i {
			margin-right: 0.5rem;
		}

		&.alert-info {
			background-color: #dbeafe;
			border-color: #bfdbfe;
			color: #1e40af;
		}

		&.alert-warning {
			background-color: #fef3c7;
			border-color: #fde68a;
			color: #92400e;
		}
	}
}

// Responsive adjustments
@media (max-width: 1200px) {
	.cleanup.section {
		max-width: 100%;
		padding: 1rem;
	}
}

@media (max-width: 768px) {
	.cleanup.section {
		padding: 0.75rem;

		.section-header {
			h2 {
				font-size: 1.25rem;
			}
		}

		form {
			.btn {
				width: 100%;
				margin-bottom: 0.5rem;

				&.ms-2 {
					margin-left: 0 !important;
				}
			}
		}

		.table {
			font-size: 0.85rem;

			thead th,
			tbody td {
				padding: 0.5rem;
			}
		}
	}
}