/**
 * GFMR Admin Settings Page Styles
 *
 * Styles for the plugin settings page in WordPress admin.
 *
 * @package MarkdownRendererForGitHub
 * @since 1.8.0
 */

/* Preview container */
.gfmr-preview-container {
	background: #f9f9f9;
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 6px;
	margin-top: 20px;
	transition: all 0.3s ease;
}

.gfmr-preview-content {
	position: relative;
}

.gfmr-preview-content pre {
	background: var(--gfmr-code-bg, #fff);
	color: var(--gfmr-code-text, #24292f);
	border: 1px solid var(--gfmr-code-border, #d0d7de);
	padding: 16px;
	border-radius: 6px;
	overflow-x: auto;
	font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
	line-height: 1.45;
	margin: 0;
	transition: all 0.3s ease;
	min-height: 200px;
}

.gfmr-preview-content code {
	background: transparent !important;
	color: inherit !important;
	padding: 0;
	font-size: 85%;
}

/* Shiki syntax highlighting support */
.gfmr-preview-content .shiki {
	background: transparent !important;
}

.gfmr-preview-content .shiki code {
	background: transparent !important;
	color: inherit;
}

/* Loading state for syntax highlighting */
.gfmr-theme-switching .gfmr-preview-content pre {
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.gfmr-theme-switching .gfmr-preview-content::before {
	content: attr(data-loading-text);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	padding: 8px 16px;
	border-radius: 4px;
	font-size: 12px;
	z-index: 10;
}

/* Enhanced syntax highlighting styles */
.gfmr-preview-content .token.comment,
.gfmr-preview-content .token.block-comment,
.gfmr-preview-content .token.prolog,
.gfmr-preview-content .token.doctype,
.gfmr-preview-content .token.cdata {
	color: var(--gfmr-syntax-comment, #6a737d);
}

.gfmr-preview-content .token.punctuation {
	color: var(--gfmr-syntax-punctuation, #24292f);
}

.gfmr-preview-content .token.tag,
.gfmr-preview-content .token.attr-name,
.gfmr-preview-content .token.namespace,
.gfmr-preview-content .token.deleted {
	color: var(--gfmr-syntax-tag, #116329);
}

.gfmr-preview-content .token.function-name {
	color: var(--gfmr-syntax-function, #6f42c1);
}

.gfmr-preview-content .token.boolean,
.gfmr-preview-content .token.number,
.gfmr-preview-content .token.function {
	color: var(--gfmr-syntax-number, #005cc5);
}

.gfmr-preview-content .token.property,
.gfmr-preview-content .token.class-name,
.gfmr-preview-content .token.constant,
.gfmr-preview-content .token.symbol {
	color: var(--gfmr-syntax-property, #e36209);
}

.gfmr-preview-content .token.selector,
.gfmr-preview-content .token.important,
.gfmr-preview-content .token.atrule,
.gfmr-preview-content .token.keyword,
.gfmr-preview-content .token.builtin {
	color: var(--gfmr-syntax-keyword, #d73a49);
}

.gfmr-preview-content .token.string,
.gfmr-preview-content .token.char,
.gfmr-preview-content .token.attr-value,
.gfmr-preview-content .token.regex,
.gfmr-preview-content .token.variable {
	color: var(--gfmr-syntax-string, #032f62);
}

/* Theme option styling */
.gfmr-theme-option {
	margin-bottom: 15px;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fafafa;
	transition: background-color 0.2s ease;
}

.gfmr-theme-option:hover {
	background: #f0f0f0;
}

.gfmr-theme-option input[type="radio"] {
	margin-right: 8px;
}

.gfmr-theme-option label {
	cursor: pointer;
	display: block;
}

.gfmr-theme-option .description {
	margin: 5px 0 0 26px;
	color: #666;
}

/* Preview info section */
.gfmr-preview-info {
	margin-top: 15px;
	padding: 10px;
	background: #fff;
	border-radius: 4px;
	border: 1px solid #ddd;
}

.gfmr-current-theme {
	font-weight: 700;
	margin: 5px 0 0 0;
}

#gfmr-theme-display {
	color: #0073aa;
}

/* Theme-specific preview styles */
.gfmr-preview-container[data-preview-theme="light"] pre {
	background: #f6f8fa !important;
	color: #24292f !important;
	border-color: #d0d7de !important;
}

.gfmr-preview-container[data-preview-theme="dark"] pre {
	background: #161b22 !important;
	color: #e6edf3 !important;
	border-color: #30363d !important;
}

.gfmr-preview-container[data-preview-theme="system"] pre {
	background: #f6f8fa !important;
	color: #24292f !important;
	border-color: #d0d7de !important;
}

/* System theme detection for preview */
@media (prefers-color-scheme: dark) {

	.gfmr-preview-container[data-preview-theme="system"] pre {
		background: #161b22 !important;
		color: #e6edf3 !important;
		border-color: #30363d !important;
	}
}

/* Basic syntax highlighting colors */
.gfmr-preview-content .gfmr-comment {
	color: #6a737d;
}

.gfmr-preview-content .gfmr-keyword {
	color: #d73a49;
}

.gfmr-preview-content .gfmr-property {
	color: #005cc5;
}

.gfmr-preview-content .gfmr-string {
	color: #032f62;
}

.gfmr-preview-content .gfmr-number {
	color: #005cc5;
}

/* Dark theme syntax highlighting */
.gfmr-preview-container[data-preview-theme="dark"] .gfmr-comment {
	color: #8b949e;
}

.gfmr-preview-container[data-preview-theme="dark"] .gfmr-keyword {
	color: #ff7b72;
}

.gfmr-preview-container[data-preview-theme="dark"] .gfmr-property {
	color: #79c0ff;
}

.gfmr-preview-container[data-preview-theme="dark"] .gfmr-string {
	color: #a5d6ff;
}

.gfmr-preview-container[data-preview-theme="dark"] .gfmr-number {
	color: #79c0ff;
}

/* System theme - dark mode syntax highlighting */
@media (prefers-color-scheme: dark) {

	.gfmr-preview-container[data-preview-theme="system"] .gfmr-comment {
		color: #8b949e;
	}

	.gfmr-preview-container[data-preview-theme="system"] .gfmr-keyword {
		color: #ff7b72;
	}

	.gfmr-preview-container[data-preview-theme="system"] .gfmr-property {
		color: #79c0ff;
	}

	.gfmr-preview-container[data-preview-theme="system"] .gfmr-string {
		color: #a5d6ff;
	}

	.gfmr-preview-container[data-preview-theme="system"] .gfmr-number {
		color: #79c0ff;
	}
}

/* Tab Navigation Styles */
.nav-tab-wrapper {
	margin: 20px 0;
	border-bottom: 1px solid #ccc;
}

/* Tab Content Styles */
.gfmr-tab-content {
	padding: 20px 0;
}

.gfmr-tab-content h2 {
	margin-top: 0;
	padding-top: 0;
}

.gfmr-tab-content .form-table {
	margin-top: 10px;
}

/* Ensure tab content transitions smoothly */
.gfmr-tab-content {
	animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}