/**
 * Markdown Block Editor Styles
 * Unified design system using CSS variables
 */

@import url(../../assets/css/gfmr-variables.css);

.gfmr-markdown-block {
	border: var(--gfmr-border);
	border-radius: var(--gfmr-border-radius);
	overflow: hidden;
	background-color: #fff;
}

.gfmr-markdown-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--gfmr-spacing-sm) var(--gfmr-spacing-md);
	background-color: #f6f8fa;
	border-bottom: var(--gfmr-border);
	font-size: 12px;
}

.gfmr-markdown-label {
	font-weight: 600;
	color: #555;
}

.gfmr-markdown-mode {
	color: #007cba;
	font-weight: 500;
}

.gfmr-markdown-editor-wrapper {
	display: block !important;
	width: 100% !important;
}

.gfmr-markdown-editor {
	width: 100%;
	height: 100%;
	padding: var(--gfmr-spacing-md);
	outline: none;
	resize: none;
	font-family: var(--gfmr-font-mono);
	font-size: 14px;
	line-height: 1.6;
	color: #1e1e1e;
	background-color: #f6f8fa;
}

.gfmr-markdown-editor::placeholder {
	color: #999;
}

.gfmr-markdown-preview {
	padding: 16px;
	min-height: 100px;
	background-color: #fff;
}

.gfmr-markdown-rendered-preview {
	line-height: 1.6;
	color: #1e1e1e;
}

.gfmr-markdown-rendered-preview h1,
.gfmr-markdown-rendered-preview h2,
.gfmr-markdown-rendered-preview h3,
.gfmr-markdown-rendered-preview h4,
.gfmr-markdown-rendered-preview h5,
.gfmr-markdown-rendered-preview h6 {
	margin-top: 24px;
	margin-bottom: 16px;
	font-weight: 600;
}

.gfmr-markdown-rendered-preview h1 {
	font-size: 2em;
	border-bottom: var(--gfmr-border-light);
	padding-bottom: 0.3em;
}

.gfmr-markdown-rendered-preview h2 {
	font-size: 1.5em;
	border-bottom: var(--gfmr-border-light);
	padding-bottom: 0.3em;
}

.gfmr-markdown-rendered-preview h3 {
	font-size: 1.25em;
}

.gfmr-markdown-rendered-preview p {
	margin-bottom: 16px;
}

.gfmr-markdown-rendered-preview ul,
.gfmr-markdown-rendered-preview ol {
	padding-left: 2em;
	margin-bottom: 16px;
}

.gfmr-markdown-rendered-preview li {
	margin-bottom: 4px;
}

.gfmr-markdown-rendered-preview blockquote {
	padding: 0 1em;
	color: #666;
	border-left: 4px solid #ddd;
	margin: 0 0 16px 0;
}

.gfmr-markdown-rendered-preview code {
	padding: 0.2em 0.4em;
	margin: 0;
	font-size: 85%;
	background-color: var(--gfmr-code-inline-bg, rgba(27, 31, 35, 0.05));
	border-radius: 3px;
	font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

.gfmr-markdown-rendered-preview pre {
	padding: 16px;
	overflow: auto;
	font-size: 85%;
	line-height: 1.45;
	background-color: var(--gfmr-code-bg, #f6f8fa);
	border-radius: 3px;
	margin-bottom: 16px;

	/* Remove border to avoid conflict with copy button feature */
	border: none;
}

.gfmr-markdown-rendered-preview pre code {
	padding: 0;

	/* background-color: transparent; - Removed: interferes with Shiki color display */
}

/* Table styles moved to gfmr-table-styles.css for consistency */

/* Editor preview uses the same table styles as content display */

/* Fallback table styles for editor preview - WordPress theme dependent */
.gfmr-markdown-rendered-preview table {
	border-collapse: collapse;
	margin-bottom: 16px;
	width: 100%;

	/* Background color and text color inherit from WordPress admin theme */

	/* Border with fallback value to ensure visibility in editor */
	border: var(--gfmr-table-border, 1px solid #ddd);
}

.gfmr-markdown-rendered-preview table th,
.gfmr-markdown-rendered-preview table td {
	padding: 6px 13px;

	/* Border with fallback value to ensure visibility in editor */
	border: var(--gfmr-table-border, 1px solid #ddd);
}

.gfmr-markdown-rendered-preview table th {
	font-weight: 600;

	/* Background color inherits from WordPress admin theme */
}

.gfmr-markdown-rendered-preview table tr:nth-child(even) {

	/* Striped background color inherits from WordPress admin theme */
}

/* Mermaid container border removal for editor */
.gfmr-markdown-rendered-preview .gfmr-mermaid-container,
.gfmr-markdown-rendered-preview .gfmr-mermaid-container-unified,
.gfmr-mermaid-container,
.gfmr-mermaid-container-unified {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.gfmr-markdown-rendered-preview hr {
	height: 0.25em;
	padding: 0;
	margin: 24px 0;
	background-color: var(--gfmr-border-color);
}

.gfmr-markdown-loading {
	color: #666;
	font-style: italic;
	text-align: center;
	padding: 20px;
}

/* ResizableBox handles */
.components-resizable-box__handle {
	background-color: #007cba;
}

.components-resizable-box__handle:hover {
	background-color: #005a87;
}

/* ==========================================================================
   Editor Preview Visibility Override

   CSS Specificity Strategy:
   - FOUC prevention rule (gfmr-code-blocks.css): 0-3-0 specificity
   - Initial editor override: 0-2-0 specificity (insufficient, FOUC rule wins)
   - Solution: Add :not() pseudo-class selectors to increase specificity to 0-4-0

   This allows editor preview to show unprocessed elements immediately.
   Editor preview is React-managed, so FOUC is less of a concern.
   The FOUC rules hide elements without data-gfmr-processed attribute,
   but editor doesn't set this attribute during preview.
   ========================================================================== */

/* Force code blocks to be visible in editor preview
   Specificity: 0-4-0 (overrides FOUC prevention at 0-3-0) */
.gfmr-markdown-rendered-preview pre code:not([data-gfmr-processed]):not([data-ssr="true"]) {
	visibility: visible !important;
	opacity: 1 !important;
}

/* Force Mermaid containers to be visible in editor preview
   Specificity: 0-4-0 (overrides FOUC prevention at 0-3-0) */
.gfmr-markdown-rendered-preview .gfmr-mermaid-container:not([data-gfmr-processed]):not([data-ssr="true"]),
.gfmr-markdown-rendered-preview .gfmr-mermaid-container-unified:not([data-gfmr-processed]):not([data-ssr="true"]) {
	visibility: visible !important;
	opacity: 1 !important;
}

/* ==========================================================================
   Light Mode Code Block Background

   Use slightly darker background for visual separation from white page.
   ========================================================================== */

.gfmr-light.gfmr-markdown-rendered-preview pre,
.gfmr-light.gfmr-markdown-rendered-preview pre.shiki,
.gfmr-light.gfmr-markdown-rendered-preview .shiki {
	background-color: #eaeef2 !important;
}

/* ==========================================================================
   Dark Mode Code Block Background

   Use dark background for Shiki dark theme highlighting.
   Only affects code blocks - not general text content.
   ========================================================================== */

.gfmr-dark.gfmr-markdown-rendered-preview pre,
.gfmr-dark.gfmr-markdown-rendered-preview pre.shiki,
.gfmr-dark.gfmr-markdown-rendered-preview .shiki {
	background-color: #0d1117 !important;
}