/*
 * Custom PDF viewer (pdf.js-based) — hand-written, NOT part of the compiled
 * Tailwind bundle (main.css/tailwind.css). See docs/features/custom-pdf-viewer.md.
 */

/*
 * Avoids a flash of the native browser PDF viewer (Download/Print buttons
 * included) between first paint and pdf-viewer.js's footer-loaded hide —
 * see PdfViewer::print_early_hide_script(). Class only exists when JS ran,
 * so pages with JS disabled correctly keep the native embed visible.
 */
html.vsip-pdf-hide-native .wp-block-file__embed[type="application/pdf"] {
	display: none;
}

.vsip-pdf-viewer {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	margin: 1em 0;
}

.vsip-pdf-viewer__status {
	margin: 0;
	padding: 32px 16px;
	text-align: center;
	color: #64748b;
	font-size: 14px;
}

.vsip-pdf-viewer__toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
	flex-wrap: wrap;
}

.vsip-pdf-viewer__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 10px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background: #fff;
	color: #1d2327;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.vsip-pdf-viewer__btn:hover:not(:disabled) {
	background: #eef2f7;
}

.vsip-pdf-viewer__btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.vsip-pdf-viewer__btn[aria-pressed="true"] {
	background: #e2e8f0;
}

.vsip-pdf-viewer__pageinfo {
	font-size: 13px;
	color: #334155;
	min-width: 64px;
	text-align: center;
}

.vsip-pdf-viewer__zoompct {
	font-size: 13px;
	color: #334155;
	min-width: 44px;
	text-align: center;
	user-select: none;
}

.vsip-pdf-viewer__spacer {
	flex: 1 1 auto;
}

.vsip-pdf-viewer__body {
	display: flex;
	align-items: stretch;
}

.vsip-pdf-viewer__sidebar {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 130px;
	flex: 0 0 130px;
	overflow-y: auto;
	max-height: 80vh;
	padding: 12px 8px;
	background: #3f4245;
	border-right: 1px solid #2a2c2e;
}

.vsip-pdf-viewer__sidebar.is-open {
	display: flex;
}

.vsip-pdf-viewer__thumb {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.15s ease;
}

.vsip-pdf-viewer__thumb:hover {
	opacity: 1;
}

.vsip-pdf-viewer__thumb canvas {
	display: block;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	max-width: 100%;
	height: auto;
}

.vsip-pdf-viewer__thumb.is-active {
	opacity: 1;
}

.vsip-pdf-viewer__thumb.is-active canvas {
	outline: 2px solid #0072b8;
	outline-offset: 2px;
}

.vsip-pdf-viewer__thumb-label {
	font-size: 11px;
	color: #cbd5e1;
}

.vsip-pdf-viewer__canvas-wrap {
	flex: 1 1 auto;
	overflow: auto;
	max-height: 80vh;
	text-align: center;
	background: #525659;
	padding: 16px;
}

.vsip-pdf-viewer__canvas {
	display: inline-block;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	max-width: 100%;
	height: auto;
}

/*
 * Continuous-scroll page stack — each page gets its own wrapper (own
 * canvas) appended into .vsip-pdf-viewer__canvas-wrap as the visitor
 * scrolls past the previous one. text-align: center is inherited from
 * .vsip-pdf-viewer__canvas-wrap, so the (still inline-block) canvas above
 * stays centered without repeating that rule here.
 */
.vsip-pdf-viewer__page {
	margin-bottom: 16px;
}

.vsip-pdf-viewer__page:last-child {
	margin-bottom: 0;
}

/*
 * Reserves space for pages not rendered yet so canvas-wrap's scrollHeight
 * barely changes as they load in — see pdf-viewer.js's updateSpacerHeight
 * for the full rationale. Height is set inline via JS; this only centers
 * the "Đang tải…" status text within whatever height that currently is.
 */
.vsip-pdf-viewer__page-spacer {
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * Block Editor counterpart — see assets/js/pdf-viewer-admin.js /
 * docs/features/pdf-viewer-block-editor-preview.md. Reuses every
 * .vsip-pdf-viewer__* class above (toolbar/buttons/canvas), only the
 * outer wrapper class differs so this :has() rule can target editor
 * context specifically without touching the frontend viewer's CSS.
 */
.vsip-pdf-editor-preview {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	margin-bottom: 1em;
}

.vsip-pdf-editor-preview .vsip-pdf-viewer__canvas-wrap {
	max-height: 500px;
}

/*
 * Only hide the native object preview once our own preview has actually
 * mounted next to it — if pdf.js fails to load/parse (see PdfEditorPreview's
 * 'error' state, which renders nothing), this never matches and the core
 * block's own <object> stays visible. Safe fallback with no JS needed.
 *
 * `~` (general sibling), not `+` (adjacent-only) — the HOC renders
 * <Fragment>{PdfEditorPreview}{BlockEdit}</Fragment>, so `.wp-block-file`
 * is a later sibling of `.vsip-pdf-editor-preview` within the same block
 * wrapper, but not necessarily the immediately-next element (Gutenberg can
 * inject its own zero-height nodes between Fragment children).
 *
 * `.components-resizable-box__container` — the drag-to-resize handle
 * Gutenberg wraps the native <object> in (so admins can resize
 * `previewHeight` by hand) — hiding just the object/overlay leaves this
 * wrapper's own height (defaults to `previewHeight`, 600px) still reserved,
 * showing as a large empty gap below our viewer. Must hide it too.
 */
.vsip-pdf-editor-preview ~ .wp-block-file .wp-block-file__preview,
.vsip-pdf-editor-preview ~ .wp-block-file .wp-block-file__preview-overlay,
.vsip-pdf-editor-preview ~ .wp-block-file .components-resizable-box__container {
	display: none;
}