/**
 * WP GFM Renderer - PlantUML Diagram Styles
 *
 * Display optimization and responsive support for diagrams generated by PlantUML
 *
 * @package WpGfmRenderer
 * @since 2.6.0
 */

/* PlantUML container base styles */
.gfmr-plantuml-container,
div.gfmr-plantuml-container,
article .gfmr-plantuml-container,
.entry-content .gfmr-plantuml-container,
.post-content .gfmr-plantuml-container,
.content .gfmr-plantuml-container {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 16px 0 !important;
	overflow-x: auto !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	position: relative !important;
	z-index: 1 !important;
}

/* PlantUML rendered content container */
.gfmr-plantuml-rendered {
	display: inline-block !important;
	text-align: center !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* PlantUML SVG styles */
.gfmr-plantuml-container svg,
.gfmr-plantuml-rendered svg {
	display: block !important;
	margin: 0 auto !important;
	max-width: 100% !important;
	height: auto !important;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Prevent flex shrink from collapsing children inside SSR success containers */
.gfmr-plantuml-container[data-ssr="true"] > * {
	flex-shrink: 0 !important;
	min-width: 0 !important;
}

/* Fallback: remove <pre> wrapper styles when it contains a PlantUML container.
   Client-side rendering may leave the original <pre> parent, which can pick up
   theme code block styles (dark background, border) and appear as a black frame.
   Note: :has() requires Firefox 121+ (Dec 2023). Older Firefox misses this rule,
   but the JS fix in applySvg() is the primary fix and handles all browsers.
   TODO: Remove this rule after _replaceElement() <pre>-replacement has been stable
         across 2+ releases with no black-border regression reports. */
pre:has(> .gfmr-plantuml-container) {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
}

/* Source container (hidden by default) */
.gfmr-plantuml-source {
	display: none;
	font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 14px;
	line-height: 1.45;
	white-space: pre-wrap;
	word-break: break-word;
}

/* SSR failure fallback: override theme dark code block styles so diagrams do not appear as a
   solid black box while JS fallback rendering is in progress. The .gfmr-plantuml-source <pre>
   stays hidden (display:none) by the rule above; these rules only apply when the container
   has the pending class, preventing the theme's dark pre/code colours from bleeding through. */
.gfmr-plantuml-pending {
	min-height: 60px;
}

.gfmr-plantuml-pending .gfmr-plantuml-source {
	display: block !important;
	background: #f6f8fa !important;
	color: #24292f !important;
	border: 1px solid #d0d7de !important;
	border-radius: 6px !important;
	padding: 16px !important;
	margin: 0 !important;
	font-size: 12px !important;
	overflow-x: auto !important;
}

/* Loading state styles */
.gfmr-plantuml-loading,
.gfmr-plantuml-container[data-ssr="pending"] {
	min-height: 100px;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 40px 20px !important;
	color: var(--gfmr-text-color, #24292f);
	font-size: 14px;
	gap: 12px;
	background: rgba(0, 0, 0, 0.02) !important;
	border-radius: 6px;
}

/* Loading spinner */
.gfmr-plantuml-loading::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 24px;
	border: 3px solid rgba(0, 0, 0, 0.1);
	border-top-color: var(--gfmr-primary-color, #0969da);
	border-radius: 50%;
	animation: gfmr-plantuml-spin 0.8s linear infinite;
}

.gfmr-plantuml-loading::after {
	content: "Loading PlantUML diagram...";
	color: var(--gfmr-text-secondary, #656d76);
	font-size: 13px;
}

@keyframes gfmr-plantuml-spin {

	to {
		transform: rotate(360deg);
	}
}

/* Error state styles */
.gfmr-plantuml-error {
	background: #fff8f8 !important;
	border: 1px solid #ffcdd2 !important;
	border-radius: 8px !important;
	padding: 16px !important;
	margin: 16px 0 !important;
	color: #d1242f !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	text-align: left !important;
}

.gfmr-plantuml-error-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.gfmr-plantuml-error-header strong {
	font-weight: 600;
	color: #d1242f;
}

.gfmr-plantuml-error-message {
	color: #57606a;
	font-size: 13px;
}

.gfmr-plantuml-error-details {
	margin-top: 12px;
	border-top: 1px solid #ffcdd2;
	padding-top: 12px;
}

.gfmr-plantuml-error-details summary {
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	color: #57606a;
	padding: 4px 0;
}

.gfmr-plantuml-error-details pre {
	margin: 8px 0 0 0;
	padding: 12px;
	background: #24292f;
	color: #f0f6fc;
	border-radius: 4px;
	font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 12px;
	line-height: 1.4;
	overflow-x: auto;
	white-space: pre-wrap;
	word-break: break-word;
}

.gfmr-plantuml-error-details code {
	font-family: inherit;
	font-size: inherit;
	background: transparent;
	color: inherit;
}

/* Maximum specificity selectors */
html body .gfmr-plantuml-container,
html body div.gfmr-plantuml-container,
html body article .gfmr-plantuml-container,
html body .entry-content .gfmr-plantuml-container,
html body .post-content .gfmr-plantuml-container,
html body .content .gfmr-plantuml-container {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	margin: 16px 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Universal border removal for PlantUML elements */
.gfmr-plantuml-container *,
.gfmr-plantuml-container *::before,
.gfmr-plantuml-container *::after {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Mobile environment adjustments */
@media (max-width: 768px) {

	.gfmr-plantuml-container {
		margin: 15px 0;
		padding: 10px;
		border-radius: 4px;
	}

	.gfmr-plantuml-loading,
	.gfmr-plantuml-container[data-ssr="pending"] {
		min-height: 80px;
		padding: 30px 15px !important;
	}

	.gfmr-plantuml-error {
		padding: 12px !important;
	}

}

/* Dark theme support */
@media (prefers-color-scheme: dark) {

	.gfmr-plantuml-pending .gfmr-plantuml-source {
		background: #161b22 !important;
		color: #e6edf3 !important;
		border-color: #30363d !important;
	}

	.gfmr-plantuml-container,
	div.gfmr-plantuml-container,
	article .gfmr-plantuml-container,
	.entry-content .gfmr-plantuml-container,
	.post-content .gfmr-plantuml-container,
	.content .gfmr-plantuml-container,
	html body .gfmr-plantuml-container,
	html body div.gfmr-plantuml-container,
	html body article .gfmr-plantuml-container,
	html body .entry-content .gfmr-plantuml-container,
	html body .post-content .gfmr-plantuml-container,
	html body .content .gfmr-plantuml-container {
		background: #fff !important;
		border: none !important;
		box-shadow: none !important;
		border-radius: 8px !important;
		padding: 16px !important;
		box-sizing: border-box !important;
	}

	.gfmr-plantuml-loading,
	.gfmr-plantuml-container[data-ssr="pending"] {
		color: var(--gfmr-text-color-dark, #e6edf3);
		background: rgba(255, 255, 255, 0.02) !important;
	}

	.gfmr-plantuml-loading::before {
		border-color: rgba(255, 255, 255, 0.1);
		border-top-color: var(--gfmr-primary-color-dark, #2f81f7);
	}

	.gfmr-plantuml-loading::after {
		color: var(--gfmr-text-secondary-dark, #8d96a0);
	}

	.gfmr-plantuml-error {
		background: #2d1b1b !important;
		border-color: #5c2b2b !important;
		color: #ff6b6b !important;
	}

	.gfmr-plantuml-error-header strong {
		color: #ff6b6b;
	}

	.gfmr-plantuml-error-message {
		color: #8d96a0;
	}

	.gfmr-plantuml-error-details {
		border-top-color: #5c2b2b;
	}

	.gfmr-plantuml-error-details summary {
		color: #8d96a0;
	}

}

/* Explicit dark theme: pending fallback source block */
[data-theme="github-dark"] .gfmr-plantuml-pending .gfmr-plantuml-source,
html[data-color-scheme="dark"] .gfmr-plantuml-pending .gfmr-plantuml-source,
html[data-theme="dark"] .gfmr-plantuml-pending .gfmr-plantuml-source,
body.dark .gfmr-plantuml-pending .gfmr-plantuml-source,
body.dark-theme .gfmr-plantuml-pending .gfmr-plantuml-source,
body.night-mode .gfmr-plantuml-pending .gfmr-plantuml-source,
[data-gfmr-theme="dark"] .gfmr-plantuml-pending .gfmr-plantuml-source {
	background: #161b22 !important;
	color: #e6edf3 !important;
	border-color: #30363d !important;
}

/* Explicit dark theme support */
[data-theme="github-dark"] .gfmr-plantuml-loading,
html[data-color-scheme="dark"] .gfmr-plantuml-loading,
body.dark .gfmr-plantuml-loading {
	color: #e6edf3;
	background: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="github-dark"] .gfmr-plantuml-loading::before,
html[data-color-scheme="dark"] .gfmr-plantuml-loading::before,
body.dark .gfmr-plantuml-loading::before {
	border-color: rgba(255, 255, 255, 0.1);
	border-top-color: #2f81f7;
}

/* Explicit dark theme - PlantUML container white background */
[data-theme="github-dark"] .gfmr-plantuml-container,
[data-theme="github-dark"] .entry-content .gfmr-plantuml-container,
html[data-color-scheme="dark"] .gfmr-plantuml-container,
html[data-color-scheme="dark"] .entry-content .gfmr-plantuml-container,
html[data-theme="dark"] .gfmr-plantuml-container,
html[data-theme="dark"] .entry-content .gfmr-plantuml-container,
body.dark .gfmr-plantuml-container,
body.dark .entry-content .gfmr-plantuml-container,
body.dark-theme .gfmr-plantuml-container,
body.dark-theme .entry-content .gfmr-plantuml-container,
body.night-mode .gfmr-plantuml-container,
body.night-mode .entry-content .gfmr-plantuml-container,
[data-gfmr-theme="dark"] .gfmr-plantuml-container,
[data-gfmr-theme="dark"] .entry-content .gfmr-plantuml-container {
	background: #fff !important;
	border-radius: 8px !important;
	padding: 16px !important;
	box-sizing: border-box !important;
}

/* Print adjustments */
@media print {

	.gfmr-plantuml-container {
		background: transparent;
		border: none;
		box-shadow: none;
		page-break-inside: avoid;
	}

	.gfmr-plantuml-rendered svg {
		max-width: 100% !important;
		height: auto !important;
	}

	.gfmr-plantuml-loading {
		display: none !important;
	}
}

/* Diagram type-specific styles */

/* Sequence diagrams */
.gfmr-plantuml-container[data-diagram-type="sequence"] svg {

	/* Sequence diagram specific styles */
}

/* Class diagrams */

.gfmr-plantuml-container[data-diagram-type="class"] svg {

	/* Class diagram specific styles */
}

/* Mindmap diagrams */

.gfmr-plantuml-container[data-diagram-type="mindmap"] svg {

	/* Mindmap specific styles */
}

/* Gantt charts */

.gfmr-plantuml-container[data-diagram-type="gantt"] svg {

	/* Gantt chart specific styles */
}

/* Activity diagrams */

.gfmr-plantuml-container[data-diagram-type="activity"] svg {

	/* Activity diagram specific styles */
}

/* Use case diagrams */

.gfmr-plantuml-container[data-diagram-type="usecase"] svg {

	/* Use case diagram specific styles */
}

/* WBS (Work Breakdown Structure) diagrams */

.gfmr-plantuml-container[data-diagram-type="wbs"] svg {

	/* WBS specific styles */
}

/* PNG images (Ditaa and other raster-only diagram types) */

.gfmr-plantuml-png {
	max-width: 100%;
	height: auto;
}