no-copy-frontend/src/app/styles/watch-doc.scss

@use './variable.scss' as v;

:root {
	--bg: #f5f6fa;
	--card: #fff;
	--border: #e2e5ef;
	--border2: #d0d4e4;
	--text: #0f1221;
	--text2: #4b5270;
	--muted: #8890ad;
	--accent: #5b47e0;
	--accent2: #7c5cf6;
	--green: #059669;
	--green-bg: #ecfdf5;
	--green-bd: #a7f3d0;
	--red: #dc2626;
	--red-bg: #fef2f2;
	--amber: #b45309;
	--shadow: 0 2px 12px rgba(15, 18, 33, .07);
}

.watch-doc {
	&-wrapper {
		background: var(--bg);
		color: var(--text);
		font-size: 15px;
		line-height: 1.6;
		min-height: 100vh;


		.btn-acc {
			background: var(--accent);
			color: #fff;
			box-shadow: 0 3px 12px rgba(91, 71, 224, .28);
			margin: 0 auto;
			display: block;

			&:hover {
				background: var(--accent2);
				text-decoration: none;
			}
		}

		.btn-out {
			background: var(--card);
			color: var(--text2);
			border: 1px solid var(--border2);
			width: 100%;

			&:hover {
				border-color: var(--accent);
				color: var(--accent);
				text-decoration: none;
			}
		}

		.document-controls {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 8px;
			gap: 10px;

			&__nav {
				display: flex;
				align-items: center;
				gap: 8px;
			}

			&__next,
			&__prev {
				font-size: 0.75rem;
				color: var(--accent);
				background: none;
				border: 1px solid var(--border2);
				border-radius: 6px;
				padding: 3px 10px;
				cursor: pointer;
				font-family: inherit;
				display: inline;

				&:hover {
					background: var(--accent);
					color: #fff;
				}
			}

			&__current-page {
				font-size: 0.75rem;
				color: var(--muted);
				display: inline;
			}

			&__fullscreen {
				font-size: .75rem;
				color: var(--accent);
				background: none;
				border: 1px solid var(--border2);
				border-radius: 6px;
				padding: 3px 10px;
				cursor: pointer;
				font-family: inherit;

				&:hover {
					background: var(--accent);
					color: #fff;
				}
			}
		}

		.prev-wrap {
			min-height: 400px;
			min-width: 300px;
			position: relative;
			display: flex;
			justify-content: center;
		}

		.pdf-canvas {
			display: block;
			max-width: 100%;
			height: auto;
		}

		.pdf-container {
			width: 100%;
			overflow-x: auto;
		}

		.pdf-container:fullscreen {
			background: #f5f5f5;
			padding: 20px;
			gap: 20px;

			.prev-wrap {
				flex: 1;
				min-height: auto;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #f5f5f5;
			}

			.pdf-canvas {
				max-width: 100%;
				max-height: calc(100vh - 120px);
				width: auto;
				height: auto;
				object-fit: contain;
			}

			.document-controls {
				position: fixed;
				bottom: 20px;
				left: 50%;
				transform: translateX(-50%);
				background: rgba(255, 255, 255, 0.95);
				backdrop-filter: blur(10px);
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
				border-radius: 12px;
				padding: 0.75rem 1.5rem;
				z-index: 1000;
				min-width: 300px;
				justify-content: center;
			}
		}
	}

	&-page {
		max-width: 880px;
		margin: 0 auto;
		padding: 0 16px 60px;
	}

	&-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 18px 0 20px;
		border-bottom: 1px solid var(--border);
		margin-bottom: 28px;

		.header-logo {
			font-size: 1.1rem;
			font-weight: 700;
			color: v.$p-color;
			display: flex;
			align-items: center;
			gap: 7px;
		}

		.header-user {
			font-size: .83rem;
			color: var(--text2);
			background: #fff;
			border: 1px solid var(--border);
			border-radius: 8px;
			padding: 7px 14px;
		}
	}

	&-status {
		background: var(--green-bg);
		border: 1.5px solid var(--green-bd);

		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		margin-bottom: 22px;
		padding: 20px 22px;
		border-radius: 14px;

		.st-title {
			color: var(--green);
			font-size: 1.05rem;
			font-weight: 700;
			margin-bottom: 3px;
		}

		.st-sub {
			font-size: .83rem;
			color: var(--text2);
			line-height: 1.5;
		}
	}

	&-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px;
	}

	&-footer {
		text-align: center;
		padding: 28px 0 0;
		color: var(--muted);
		font-size: .76rem;
		border-top: 1px solid var(--border);
		margin-top: 14px;
		display: flex;
		justify-content: center;
		gap: 10px;
	}

	&-card {
		background: var(--card);
		border: 1px solid var(--border);
		border-radius: 14px;
		margin-bottom: 14px;
		overflow: hidden;
		box-shadow: var(--shadow);

		.card-head {
			padding: 14px 20px;
			border-bottom: 1px solid var(--border);
			display: flex;
			align-items: center;
			gap: 9px;

			font-size: .78rem;
			font-weight: 700;
			color: var(--text);
			text-transform: uppercase;
			letter-spacing: .6px;
		}

		.card-body {
			padding: 14px 20px;

			.owner-row {
				display: flex;
				align-items: center;
				gap: 12px;
			}

			.owner-av {
				width: 42px;
				height: 42px;
				border-radius: 10px;
				background: linear-gradient(135deg, var(--accent), var(--accent2));
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 1.1rem;
				font-weight: 700;
				flex-shrink: 0;
			}

			.owner-name {
				font-weight: 700;
				margin-bottom: 5px;
			}

			.owner-meta {
				color: var(--muted);
			}
		}

		.download-description {
			font-size: .82rem;
			color: var(--text2);
			margin-bottom: 14px;
			text-align: center;
		}
	}

	&-actions {
		display: flex;
		gap: 9px;
		flex-wrap: wrap;
		margin-top: 16px;
	}
}