no-copy-frontend/src/app/styles/marking-pages.scss

.protection-summary {
	background: linear-gradient(135deg, #e8f5e8, #c8e6c9);
	border: 2px solid #4caf50;
	border-radius: 15px;
	padding: 20px;
	margin-bottom: 25px;
	text-align: center;

	h3 {
		color: #2e7d32;
		margin-bottom: 15px;
		font-size: 18px;
	}

	.protection-stats {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 15px;
		margin-top: 15px;
	}

	.stat-card {
		background: rgba(255, 255, 255, 0.8);
		padding: 15px;
		border-radius: 10px;
		text-align: center;
	}

	.stat-number {
		font-size: 24px;
		font-weight: bold;
		color: #2e7d32;
	}

	.stat-label {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}
}

.upload-section {
	background: white;
	border-radius: 20px;
	padding: 30px;
	margin-bottom: 30px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

	h3 {
		margin-bottom: 20px;
		color: #111827;
		font-size: 20px;
	}

	.drag-drop-zone {
		border: 3px dashed #6366f1;
		border-radius: 15px;
		padding: 40px 20px;
		text-align: center;
		background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
		margin-bottom: 20px;
		transition: all 0.3s ease;

		.icon {
			width: 70px;
			height: 70px;
			margin: 0 auto;
			color: #6366f1;
		}

		h4 {
			color: #6366f1;
			margin-bottom: 5px;
			font-size: 22px;
		}

		.description {
			color: #6b7280;
			margin-bottom: 5px;
			text-align: start;
		}

		.btn-primary {
			background: linear-gradient(45deg, #6566f1, #5a5ce9);
			margin-bottom: 40px;
		}
	}

	.selected-file {
		border-radius: 15px;
		background: #fff;
		padding: 10px;

		&-file-info {
			text-align: left;
		}

		.uploaded-image {
			border-radius: 0.25rem;
			max-height: calc(4px * 40);
			margin-inline: auto;
			margin-bottom: 20px;
			border: 1px solid #d1d5db;
		}

		.btn-confirm {
			background: linear-gradient(45deg, #6566f1, #01579b);
			color: white;
			border: none;
			padding: 5px 15px;
			border-radius: 12px;
			cursor: pointer;
			font-weight: 600;
			font-size: 16px;
			transition: 0.3s;
			min-width: 160px;
			transform: translateY(0px);
			box-shadow: none;
		}

		.btn-cancel {
			background: #fff;
			color: rgb(99, 102, 241);
			border: 2px solid rgb(99, 102, 241);
			padding: 5px 15px;
			border-radius: 12px;
			cursor: pointer;
			font-weight: 600;
			font-size: 16px;
			transition: 0.3s;
			min-width: 120px;
		}

		.btn:hover {
			transform: translateY(-2px);
			box-shadow: 0 8px 25px #6366f14d;
		}
	}
}

.test-section {
	background: linear-gradient(135deg, #fff3e0, #ffe0b2);
	border-radius: 20px;
	padding: 30px;
	margin-bottom: 30px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

	h3 {
		margin-bottom: 20px;
		color: #e65100;
		font-size: 20px;
	}

	.test-section-content {
		border: 2px dashed #ff9800;
		border-radius: 10px;
		padding: 20px;
		text-align: center;
		background: #fff8e1;

		h4 {
			font-size: 32px;
			margin-bottom: 10px;
		}

		.btn {
			background: linear-gradient(45deg, #ff9800, #f57c00);
		}

		p {
			margin-top: 15px;
			font-size: 12px;
			color: #e65100;
		}
	}
}

.protected-files-table {
	background: white;
	border-radius: 15px;
	overflow: hidden;
	margin-top: 30px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

	h3 {
		padding: 20px 20px 0;
		color: #111827;
		font-size: 18px;
		margin-bottom: 20px;
	}

	table {
		width: 100%;
		border-collapse: collapse;
	}

	th {
		background: linear-gradient(180deg, #6366f1, #8b5cf6);
		color: white;
		padding: 15px;
		text-align: left;
		font-weight: 600;
		font-size: 14px;
	}

	td {
		padding: 15px;
		border-bottom: 1px solid #f3f4f6;
		vertical-align: middle;
	}

	.files-table {
		&-file {
			display: flex;
			align-items: center;
		}

		&-icon {
			width: 40px;
			height: 40px;
			background: #f0f9ff;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 12px;
			border: 2px solid #6366f1;
			color: #6366f1;
		}

		&-title {
			font-weight: 500;
			color: #111827;
			font-size: 14px;
		}

		&-protect {
			font-size: 11px;
			color: #6366f1;
			font-weight: 600;
		}

		&-size {
			color: #6b7280;
			font-size: 14px;
		}

		&-protect {
			display: flex;
			align-items: center;
		}

		&-bar {
			width: 30px;
			height: 6px;
			background: #e5e7eb;
			border-radius: 3px;
			margin-right: 8px;
		}

		&-fill {
			width: 100%;
			height: 100%;
			background: #6366f1;
			border-radius: 3px;
		}

		&-date {
			color: #6b7280;
			font-size: 13px;
		}
	}

	.btn-secondary {
		background: #6366f1;
		color: white;
		padding: 5px 16px 5px 10px;
	}

	.icon {
		height: 18px;
	}

	.real-protection-badge {
		background: linear-gradient(135deg, #6366f1, #8b5cf6);
		color: white;
		padding: 2px 6px;
		border-radius: 4px;
		font-size: 9px;
		font-weight: bold;
		margin-left: 5px;
	}
}