/* GGSA Azure Resource Viewer — Frontend styles */

.garv-wrapper {
	margin: 0 0 1.5em;
}

/* ── uDoc Viewer container ─────────────────────────────────────────────────── */

.garv-udoc-viewer {
	width: 100%;
	border: 1px solid #ddd;
	border-radius: 4px;
	overflow: hidden;
	background: #f9f9f9;
	box-sizing: border-box;
}

/* Loading state — shown via CSS class while the WASM engine initialises */
.garv-udoc-viewer.garv-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f9f9f9;
}

.garv-udoc-viewer.garv-loading::before {
	content: '';
	display: block;
	width: 32px;
	height: 32px;
	border: 3px solid #e0e0e0;
	border-top-color: #0078D4;
	border-radius: 50%;
	animation: garv-spin 0.8s linear infinite;
}

@keyframes garv-spin {
	to { transform: rotate(360deg); }
}

/* ── uDoc loading overlay — custom spinner in place of the docMentis logo ──── */
/*
 * uDoc renders its loading overlay (.udoc-loading-overlay) with a child
 * .udoc-loading-content block that contains the docMentis logo, their spinner,
 * and a progress bar.  We hide that block entirely (the !important on the
 * branding element's own display only protects the element itself — hiding its
 * parent still removes it from layout) and replace the overlay with our own
 * Azure-blue spinner + status text via CSS pseudo-elements.
 *
 * The overlay's show/hide is still driven by uDoc's own inline-style toggling
 * (display: flex / none), so timing remains correct.
 */

.garv-udoc-viewer .udoc-loading-content {
	display: none !important;
}

.garv-udoc-viewer .udoc-loading-overlay {
	flex-direction: column;
	align-items:    center;
	justify-content: center;
	gap: 12px;
	background: rgba(249, 249, 249, 0.94);
}

/* Azure-blue spinner */
.garv-udoc-viewer .udoc-loading-overlay::before {
	content: '';
	display: block;
	width:  36px;
	height: 36px;
	border: 3px solid #e0e0e0;
	border-top-color: #0078D4;
	border-radius: 50%;
	animation: garv-spin 0.8s linear infinite;
}

/* "Loading document…" label */
.garv-udoc-viewer .udoc-loading-overlay::after {
	content: 'Loading document\2026';
	font-size: 0.85em;
	color: #555;
	font-family: system-ui, -apple-system, sans-serif;
}

/* ── Error state ────────────────────────────────────────────────────────────── */

.garv-error {
	color: #c0392b;
	font-size: 0.9em;
	padding: 0.75em 1em;
	border: 1px solid #e74c3c;
	border-radius: 4px;
	background: #fdf3f2;
	margin: 0;
}