/* Astro Modular Settings Plugin Styles */

/* Preset Warning Modal Styles */
.preset-warning-modal-header {
	margin-top: 0;
}

.preset-warning-message {
	margin-bottom: 16px;
}

.preset-warning-changes-list {
	margin-bottom: 24px;
	padding-left: 20px;
}

.preset-warning-list-item {
	margin-bottom: 4px;
}

.preset-warning-question {
	font-weight: bold;
	margin-bottom: 24px;
}

.modal-button-container {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
}

/* Hide ribbon icon from context menu when removed */
body[data-astro-modular-ribbon-removed="true"] .menu-item:has(svg[data-lucide="wand-sparkles"]),
body[data-astro-modular-ribbon-removed="true"] .menu-item:has(.lucide-wand-sparkles),
body[data-astro-modular-ribbon-removed="true"] .menu-item .menu-item-icon:has(svg[data-lucide="wand-sparkles"]),
body[data-astro-modular-ribbon-removed="true"] .menu-item .menu-item-icon:has(.lucide-wand-sparkles) {
	display: none !important;
}

/* Wizard skip button opacity */
.wizard-skip-button {
	opacity: 0.6;
}

/* Wizard Modal Styles */
.astro-modular-wizard {
	font-family: var(--font-family);
}

.astro-modular-wizard .modal-content {
	max-width: 800px;
	max-height: 90vh;
	overflow-y: auto;
}

.wizard-header {
	text-align: center;
	padding: 20px 0;
}

.wizard-logo {
	font-size: 48px;
	margin-bottom: 10px;
}

.wizard-header h1 {
	margin: 0 0 15px 0;
	color: var(--text-normal);
}

.wizard-progress {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 1rem;
	margin-top: 1rem;
}

.progress-bar {
	width: 100%;
	height: 12px !important;
	background: var(--background-modifier-border);
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: flex-start !important;
}

.progress-fill {
	height: 12px !important;
	background: var(--interactive-accent) !important;
	transition: width 0.3s ease;
	border-radius: 4px;
	min-width: 2px;
	min-height: 12px !important;
	opacity: 1;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
}

.progress-text {
	font-size: 14px;
	color: var(--text-muted);
	font-weight: 500;
	text-align: center;
	margin-top: 4px;
}

.wizard-content {
	min-height: 400px;
}

.wizard-footer {
	padding: 20px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wizard-buttons {
	display: flex;
	gap: 10px;
}

/* Use Obsidian's native button styles - remove custom overrides */

/* Welcome Step */
.welcome-content {
	text-align: center;
}

.welcome-content h2 {
	margin-bottom: 8px;
	margin-top: 0;
	color: var(--text-normal);
}

.welcome-content p {
	color: var(--text-muted);
	margin-bottom: 30px;
	line-height: 1.6;
}

.welcome-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin: 30px 0;
}

.feature-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 15px;
	background: var(--background-secondary);
	border-radius: 8px;
	border: 1px solid var(--background-modifier-border);
}

.feature-icon {
	font-size: 24px;
}

.welcome-note {
	margin-top: 30px;
}

.welcome-note a {
	color: var(--interactive-accent);
	text-decoration: none;
}

.welcome-note a:hover {
	text-decoration: underline;
}

/* Template Selection */
.template-selection h2,
.theme-selection h2,
.content-org-selection h2,
.features-selection h2,
.plugin-config h2,
.finalize-step h2 {
	margin-bottom: 8px;
	margin-top: 0;
	color: var(--text-normal);
}

.template-selection p,
.theme-selection p,
.content-org-selection p,
.features-selection p,
.plugin-config p,
.finalize-step p {
	color: var(--text-muted);
	margin-bottom: 25px;
	line-height: 1.6;
}

.template-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 15px;
}

.template-option {
	padding: 20px;
	border: 2px solid var(--background-modifier-border);
	border-radius: 8px;
	transition: all 0.2s ease;
	background: var(--background-primary);
}

.template-option:hover {
	border-color: var(--interactive-accent);
	background: var(--background-modifier-hover);
}

.template-option.selected {
	border-color: var(--interactive-accent);
	background: var(--interactive-accent-2);
}

.template-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.template-header h3 {
	margin: 0;
	color: var(--text-normal);
}

.recommended {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 500;
}

.template-description {
	color: var(--text-muted);
	margin-bottom: 15px;
	line-height: 1.5;
}

.template-features {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.feature-tag {
	background: var(--background-secondary);
	color: var(--text-muted);
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	border: 1px solid var(--background-modifier-border);
}

/* Theme Selection */
.theme-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 15px;
}

.theme-option {
	padding: 15px;
	border: 2px solid var(--background-modifier-border);
	border-radius: 8px;
	transition: all 0.2s ease;
	background: var(--background-primary);
}

.theme-option:hover {
	border-color: var(--interactive-accent);
	background: var(--background-modifier-hover);
}

.theme-option.selected {
	border-color: var(--interactive-accent);
	background: var(--interactive-accent-2);
}

/* Override text colors based on background brightness */
.theme-option[style*="background: #"] h3,
.theme-option[style*="background: #"] p {
	/* Use CSS to automatically determine text color based on background brightness */
	color: var(--text-normal);
}

/* For dark backgrounds, use light text */
.theme-option[style*="background: #020617"] h3,
.theme-option[style*="background: #020617"] p,
.theme-option[style*="background: #1a1a1a"] h3,
.theme-option[style*="background: #1a1a1a"] p,
.theme-option[style*="background: #181a1f"] h3,
.theme-option[style*="background: #181a1f"] p,
.theme-option[style*="background: #0f1419"] h3,
.theme-option[style*="background: #0f1419"] p,
.theme-option[style*="background: #181825"] h3,
.theme-option[style*="background: #181825"] p,
.theme-option[style*="background: #000000"] h3,
.theme-option[style*="background: #000000"] p,
.theme-option[style*="background: #191a21"] h3,
.theme-option[style*="background: #191a21"] p,
.theme-option[style*="background: #2d353b"] h3,
.theme-option[style*="background: #2d353b"] p,
.theme-option[style*="background: #100f0f"] h3,
.theme-option[style*="background: #100f0f"] p,
.theme-option[style*="background: #1d2021"] h3,
.theme-option[style*="background: #1d2021"] p,
.theme-option[style*="background: #141414"] h3,
.theme-option[style*="background: #141414"] p,
.theme-option[style*="background: #2e3440"] h3,
.theme-option[style*="background: #2e3440"] p,
.theme-option[style*="background: #0a0a0a"] h3,
.theme-option[style*="background: #0a0a0a"] p,
.theme-option[style*="background: #191724"] h3,
.theme-option[style*="background: #191724"] p,
.theme-option[style*="background: #232729"] h3,
.theme-option[style*="background: #232729"] p,
.theme-option[style*="background: #002b36"] h3,
.theme-option[style*="background: #002b36"] p,
.theme-option[style*="background: #17191c"] h3,
.theme-option[style*="background: #17191c"] p {
	color: white !important;
}

.theme-preview {
	height: 80px;
	border-radius: 6px;
	margin-bottom: 10px;
	position: relative;
	overflow: hidden;
}

.theme-preview-content {
	padding: 10px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.preview-text {
	color: white;
	font-weight: 500;
	font-size: 14px;
}

.preview-accent {
	color: rgba(255, 255, 255, 0.8);
	font-size: 12px;
}

.theme-info h3 {
	margin: 0 0 5px 0;
	color: var(--text-normal);
	font-size: 14px;
}

.theme-info p {
	margin: 0;
	color: var(--text-muted);
	font-size: 12px;
	line-height: 1.4;
}

/* Content Organization */
.org-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

.org-option {
	padding: 20px;
	border: 2px solid var(--background-modifier-border);
	border-radius: 8px;
	transition: all 0.2s ease;
	background: var(--background-primary);
}

.org-option:hover {
	border-color: var(--interactive-accent);
	background: var(--background-modifier-hover);
}

.org-option.selected {
	border-color: var(--interactive-accent);
	background: var(--interactive-accent-2);
}

.org-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.org-header h3 {
	margin: 0;
	color: var(--text-normal);
}

.default-badge {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 500;
}

.org-option p {
	color: var(--text-muted);
	margin-bottom: 15px;
	line-height: 1.5;
}

.org-example {
	background: var(--background-secondary);
	padding: 15px;
	border-radius: 6px;
	border: 1px solid var(--background-modifier-border);
}

.org-example code {
	font-family: var(--font-monospace);
	font-size: 12px;
	color: var(--text-normal);
	white-space: pre;
	line-height: 1.4;
}

/* Features Selection */
.features-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.feature-setting {
	padding: 15px;
	background: var(--background-secondary);
	border-radius: 8px;
	border: 1px solid var(--background-modifier-border);
}

.feature-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
}

.feature-toggle input[type="checkbox"] {
	display: none;
}

.toggle-slider {
	width: 44px;
	height: 24px;
	background: var(--background-modifier-border);
	border-radius: 12px;
	position: relative;
	transition: background 0.2s ease;
}

.toggle-slider::before {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	background: white;
	border-radius: 50%;
	top: 2px;
	left: 2px;
	transition: transform 0.2s ease;
}

.feature-toggle input[type="checkbox"]:checked+.toggle-slider {
	background: var(--interactive-accent);
}

.feature-toggle input[type="checkbox"]:checked+.toggle-slider::before {
	transform: translateX(20px);
}

.feature-label {
	font-weight: 500;
	color: var(--text-normal);
}

/* Plugin Configuration */
.plugin-status {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
}

.plugin-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px;
	background: var(--background-secondary);
	border-radius: 8px;
	border: 1px solid var(--background-modifier-border);
}

.plugin-item.installed {
	border-color: var(--color-green);
}

.plugin-item.missing {
	border-color: var(--color-red);
}

.plugin-item.partially-configured {
	border-color: #f59e0b;
	/* Orange/amber color */
}

.plugin-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;
}

.plugin-item.installed .plugin-icon {
	color: var(--text-success);
}

.plugin-item.missing .plugin-icon {
	color: var(--text-error);
}

.plugin-item.partially-configured .plugin-icon {
	color: #f59e0b;
	/* Orange/amber color to match border */
}

.plugin-info h3 {
	margin: 0 0 5px 0 !important;
	padding: 0 !important;
	color: var(--text-normal);
	font-size: 14px;
}

.plugin-info p {
	margin: 0;
	color: var(--text-muted);
	font-size: 12px;
}

/* Fix indentation for all h3 elements in settings */
.astro-modular-settings h3 {
	margin-left: 0 !important;
	padding-left: 0 !important;
}

/* Fix indentation for h3 in plugin items specifically */
.astro-modular-settings .plugin-item .plugin-info h3 {
	margin-left: 0 !important;
	padding-left: 0 !important;
}

.config-options {
	display: flex;
	gap: 10px;
}

.config-button {
	padding: 10px 20px;
	border: 1px solid var(--background-modifier-border);
	border-radius: 6px;
	background: var(--background-primary);
	color: var(--text-normal);
	transition: all 0.2s ease;
	font-size: 14px;
}

.config-button:hover {
	background: var(--background-modifier-hover);
}

.config-button.primary {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
	border-color: var(--interactive-accent);
}

.config-button.primary:hover {
	background: var(--interactive-accent-hover);
}

.config-button.secondary {
	background: var(--background-secondary);
}

/* Finalize Step */
.astro-modular-wizard .config-summary {
	background: var(--background-secondary);
	padding: 20px;
	border-radius: 8px;
	border: 1px solid var(--background-modifier-border);
	margin-bottom: 20px;
}

.astro-modular-wizard .config-summary h3 {
	margin: 0 0 15px 0;
	color: var(--text-normal);
}

.astro-modular-wizard .config-item {
	margin-bottom: 8px;
	color: var(--text-muted);
}

.astro-modular-wizard .config-item:last-child {
	margin-bottom: 0;
}

.finalize-options {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.checkbox-option {
	display: flex;
	align-items: center;
	gap: 10px;
}

.checkbox-option input[type="checkbox"] {
	margin: 0;
}

/* Settings Tab Styles - Minimal and Clean */
/* This class is used purely for scoping descendant styles (heading spacing, input widths, etc.) */
.astro-modular-settings {
	font-family: var(--font-family);
}

/* Vertical Tab Content (Shell Commands style) - SCOPED to this plugin only */
.astro-modular-settings .vertical-tab-content {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.astro-modular-settings .tab-container {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 0;
	height: 100%;
}

.astro-modular-settings .tab-nav {
	position: sticky;
	top: 0;
	z-index: 0;
	display: flex;
	border-bottom: 1px solid var(--background-modifier-border);
	margin: 0;
	padding: var(--size-4-8) var(--size-4-12) 0 var(--size-4-12);
	gap: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--background-modifier-border) transparent;
	-webkit-overflow-scrolling: touch;
	pointer-events: none;
}

.astro-modular-settings .tab-nav .tab-button {
	pointer-events: auto;
}

.astro-modular-settings .tab-nav::-webkit-scrollbar {
	height: 6px;
}

.astro-modular-settings .tab-nav::-webkit-scrollbar-track {
	background: transparent;
}

.astro-modular-settings .tab-nav::-webkit-scrollbar-thumb {
	background: var(--background-modifier-border);
	border-radius: 3px;
}

.astro-modular-settings .tab-nav::-webkit-scrollbar-thumb:hover {
	background: var(--background-modifier-border-hover);
}

.astro-modular-settings .tab-button {
	padding: 8px 12px;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	color: var(--text-muted);
	cursor: default;
	font-size: 14px;
	margin: 0;
	border-radius: 0;
	white-space: nowrap;
	flex-shrink: 0;
	text-align: left;
	box-shadow: none;
	position: relative;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.astro-modular-settings .tab-button:hover {
	color: var(--text-normal);
}

.astro-modular-settings .tab-button.active {
	color: var(--text-normal);
	background: var(--background-primary);
	border-bottom: 2px solid var(--interactive-accent);
}

.astro-modular-settings .tab-content {
	flex: 1;
	padding: var(--size-4-12) var(--size-4-12) var(--size-4-16) var(--size-4-12);
	margin: 0;
	overflow-y: auto;
	min-height: 0;
	height: 100%;
}

.astro-modular-settings .tab-content-container {
	flex: 1;
	padding: 20px;
	margin: 0;
}

.astro-modular-settings .SC-tab-content {
	display: none;
	padding: 0;
	margin: 0;
}

.astro-modular-settings .SC-tab-content.SC-tab-active {
	display: block;
}

.astro-modular-settings .settings-section {
	margin-bottom: 30px;
}

/* Fix indentation for heading settings - remove padding/margin */
/* Only apply to headings within .settings-section (Navigation pages and Social links) */
/* This excludes headings created by createSettingsGroup in other tabs */
.astro-modular-settings .settings-section .setting-item-heading {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	border: none !important;
}

.astro-modular-settings .settings-section .setting-item-heading .setting-item-name {
	margin: 0 !important;
	padding: 0 !important;
	font-weight: var(--font-medium);
}

.astro-modular-settings .settings-section .setting-item-heading .setting-item-info {
	margin: 0 !important;
	padding: 0 !important;
}

.astro-modular-settings .settings-section p {
	color: var(--text-muted);
	margin-bottom: 20px;
	line-height: 1.6;
}

.astro-modular-settings .config-display {
	background: var(--background-secondary);
	padding: 20px;
	border-radius: 8px;
	margin: 20px 0;
}

/* Fix heading indentation in config-info */
.astro-modular-settings .config-info .setting-item-heading,
.astro-modular-settings .config-info .setting-item.setting-item-heading {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	border: none !important;
}

.astro-modular-settings .config-info .setting-item-heading .setting-item-name,
.astro-modular-settings .config-info .setting-item.setting-item-heading .setting-item-name {
	margin: 0 0 15px 0 !important;
	padding: 0 !important;
}

.astro-modular-settings .config-item {
	margin-bottom: 8px;
	color: var(--text-muted);
}

.astro-modular-settings .config-item:last-child {
	margin-bottom: 0;
}

/* Config items container - ensure left alignment */
.astro-modular-settings .config-items {
	width: 100%;
	display: block;
}

.astro-modular-settings .setting-item:has(.config-items) {
	display: block !important;
	flex-direction: column !important;
	align-items: flex-start !important;
}

/* Form elements in settings - Match Shell Commands exactly */
.astro-modular-settings .setting-item {
	margin-bottom: 16px;
}

.astro-modular-settings .setting-item:last-child {
	margin-bottom: 0;
}

/* Ensure last setting in group without heading has proper spacing before next heading */
.astro-modular-settings .setting-group:not(:has(.setting-item-heading)) .setting-items>.setting-item:last-child {
	margin-bottom: var(--size-4-6) !important;
}

/* Direct spacing when heading follows a group without heading (sibling selector) */
.astro-modular-settings .setting-group:not(:has(.setting-item-heading))+.setting-item-heading,
.astro-modular-settings .setting-group:not(:has(.setting-item-heading))~.setting-item-heading {
	margin-top: var(--size-4-6) !important;
}

/* Also handle assets-section case */
.astro-modular-settings .setting-group:not(:has(.setting-item-heading))+.assets-section .setting-item-heading {
	margin-top: var(--size-4-6) !important;
}

/* Remove top border from first setting item when it comes after an empty settings-section */
.astro-modular-settings .tab-content .settings-section:empty+.setting-item {
	border-top: none !important;
}

.astro-modular-settings .setting-item-description {
	margin: 4px 0 0 0;
	color: var(--text-muted);
	font-size: 12px;
	line-height: 1.4;
}

/* Footer content setting - add spacing between description and textarea */
.astro-modular-settings .footer-content-setting .setting-item-description {
	margin-bottom: var(--size-4-3) !important;
}

.astro-modular-settings .footer-content-setting .setting-item-control {
	display: block !important;
}

.astro-modular-settings .setting-item-control {
	margin: 0;
}

.astro-modular-settings .setting-item-control input,
.astro-modular-settings .setting-item-control select,
.astro-modular-settings .setting-item-control textarea {
	margin: 0;
}

/* Standardize text input widths to match dropdown width (exclude textareas) */
.astro-modular-settings .setting-item-control input[type="text"] {
	width: 200px !important;
}

/* Standardize dropdown widths to match text input width - override all conflicting rules */
.astro-modular-settings .setting-item-control select,
.astro-modular-settings .setting-item select,
.astro-modular-settings select.dropdown {
	width: 200px !important;
	min-width: 200px !important;
	max-width: 200px !important;
}

/* Override the .setting-group select rule that sets width to 100% */
.astro-modular-settings .setting-group select {
	width: 200px !important;
	min-width: 200px !important;
	max-width: 200px !important;
}

/* Fix assets header heading with folder button */
.astro-modular-settings .assets-section .setting-item-heading {
	position: relative;
}

.astro-modular-settings .assets-section .setting-item-heading .setting-item-control {
	position: relative;
}

/* Fix theme pills container - allow wrapping */
.astro-modular-settings .theme-pills-container {
	width: 100%;
	box-sizing: border-box;
}

.astro-modular-settings .theme-pills-wrapper {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Theme pill styling - restore personality */
.astro-modular-settings .theme-pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 16px;
	font-size: 12px;
	font-weight: 500;
	gap: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	border: 1px solid;
}

.astro-modular-settings .theme-pill:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Button spacing in settings */
.astro-modular-settings .button-container {
	margin: 16px 0;
}

.astro-modular-settings .button-container button {
	margin-right: 8px;
	margin-bottom: 8px;
}

.astro-modular-settings .button-container button:last-child {
	margin-right: 0;
}

/* Remove all drop shadows and 3D effects */
.astro-modular-settings button,
.astro-modular-settings .toggle-slider,
.astro-modular-settings .setting-item-control button,
.astro-modular-settings .setting-item-control .toggle-slider,
.astro-modular-settings .setting-item-control input[type="checkbox"] {
	box-shadow: none !important;
	filter: none !important;
	text-shadow: none !important;
}

/* Remove hover shadows */
.astro-modular-settings button:hover,
.astro-modular-settings .toggle-slider:hover {
	box-shadow: none !important;
	filter: none !important;
}

.plugin-status-container {
	margin: 20px 0;
}

/* Responsive Design */
@media (max-width: 768px) {
	.astro-modular-wizard .modal-content {
		max-width: 95vw;
		margin: 10px;
	}

	.template-options,
	.theme-options,
	.org-options {
		grid-template-columns: 1fr;
	}

	.welcome-features {
		grid-template-columns: 1fr;
	}

	.wizard-buttons {
		flex-direction: column;
	}

	.wizard-button {
		width: 100%;
		text-align: center;
	}
}

/* Dark mode adjustments */
.theme-dark .theme-preview {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.theme-dark .toggle-slider::before {
	background: var(--background-primary);
}

/* Animation for smooth transitions */
.template-option,
.theme-option,
.org-option {
	transform: translateY(0);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.template-option:hover,
.theme-option:hover,
.org-option:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.theme-dark .template-option:hover,
.theme-dark .theme-option:hover,
.theme-dark .org-option:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Specific improvements added by AI assistant */

/* Fix content organization display - use proper pre/code blocks */
.org-example pre {
	margin: 0;
	font-family: var(--font-monospace);
	font-size: 12px;
	color: var(--text-normal);
	white-space: pre;
	line-height: 1.4;
	overflow-x: auto;
}

.org-example code {
	background: none;
	padding: 0;
	font-size: inherit;
	color: inherit;
}

/* Font selection improvements - prevent dropdown flashing */
.font-options {
	display: grid;
	gap: 1rem;
}

.font-setting {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.font-setting label {
	font-weight: 500;
	color: var(--text-normal);
}

.font-setting select,
.font-setting input {
	/* Use Obsidian's native form control styling */
	width: 100%;
	background-color: var(--background-primary);
	color: var(--text-normal);
}

/* Optional features improvements - better layout */
.features-grid {
	display: grid;
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.feature-card {
	border: 1px solid var(--background-modifier-border);
	border-radius: 8px;
	padding: 1.25rem;
	background-color: var(--background-secondary);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
	border-color: var(--interactive-accent);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.settings-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
}

/* SCOPED to plugin UI only */
.astro-modular-settings .setting-group,
.astro-modular-wizard .setting-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.astro-modular-settings .setting-group label,
.astro-modular-wizard .setting-group label {
	font-weight: 500;
	color: var(--text-normal);
	font-size: 0.875rem;
}

.astro-modular-settings .setting-group input,
.astro-modular-settings .setting-group select,
.astro-modular-wizard .setting-group input,
.astro-modular-wizard .setting-group select {
	/* Use Obsidian's native form control styling */
	width: 100%;
}

/* File input group removed - browse button no longer needed */

/* Feature spacing improvements */
.feature-header {
	margin-bottom: 1.5rem;
}

.feature-details {
	margin-top: 0.5rem;
}

.feature-note {
	padding: 0.75rem;
	background-color: var(--background-modifier-border);
	border-radius: 4px;
	border-left: 3px solid var(--interactive-accent);
}

.feature-note p {
	margin: 0;
	font-size: 0.875rem;
	color: var(--text-muted);
}

.feature-note a {
	color: var(--interactive-accent);
	text-decoration: none;
}

.feature-note a:hover {
	text-decoration: underline;
}

/* Deployment options improvements */
.deployment-options {
	display: grid;
	gap: 1rem;
	margin-top: 1.5rem;
}

.deployment-option {
	border: 1px solid var(--background-modifier-border);
	border-radius: 8px;
	padding: 1.25rem;
	background-color: var(--background-secondary);
	transition: all 0.2s ease;
}

.deployment-option:hover {
	border-color: var(--interactive-accent);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.deployment-option.selected {
	border-color: var(--interactive-accent);
	background-color: var(--interactive-accent-2);
}

.deployment-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.deployment-header h3 {
	margin: 0;
	color: var(--text-normal);
}

.deployment-option p {
	margin: 0;
	color: var(--text-muted);
	font-size: 0.875rem;
}

/* Site Information Form Styles */
.site-info-form {
	margin-top: 20px;
	padding: 20px;
	background: var(--background-secondary);
	border-radius: 8px;
	border: 1px solid var(--background-modifier-border);
}

.site-info-form h3 {
	margin: 0 0 15px 0;
	color: var(--text-normal);
}

.form-group {
	margin-bottom: 15px;
}

.form-group label {
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
	color: var(--text-normal);
	text-align: left;
}

.form-group input {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--background-modifier-border);
	border-radius: 4px;
	background: var(--background-primary);
	color: var(--text-normal);
	font-size: 14px;
}

.form-group input:focus {
	outline: none;
	border-color: var(--interactive-accent);
	box-shadow: 0 0 0 2px var(--interactive-accent-2);
}

/* Navigation Configuration Styles */
.navigation-config {
	padding: 20px 0;
}

.navigation-sections {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.nav-section {
	padding: 20px;
	background: var(--background-secondary);
	border-radius: 8px;
	border: 1px solid var(--background-modifier-border);
}

.nav-section h3 {
	margin: 0 0 5px 0;
	color: var(--text-normal);
}

.nav-section p {
	margin: 0 0 15px 0;
	color: var(--text-muted);
	font-size: 0.875rem;
}

.nav-items {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 15px;
}

.nav-item {
	padding: 15px;
	background: var(--background-primary);
	border: 1px solid var(--background-modifier-border);
	border-radius: 6px;
	transition: all 0.2s ease;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	cursor: move;
}

.nav-item.dragging {
	opacity: 0.5;
	transform: rotate(2deg);
}

.nav-item.drag-over {
	border-color: var(--interactive-accent);
	background: var(--background-modifier-hover);
}


.nav-item:hover {
	border-color: var(--interactive-accent);
}

.nav-item-content {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	flex: 1;
	width: 100%;
}

.nav-item-fields {
	display: flex;
	flex: 1;
	gap: 10px;
	align-items: center;
	min-width: 0;
	/* Allow flex items to shrink below their content size */
}

.nav-item-fields .nav-title {
	flex: 0 0 120px;
	/* Fixed width for title */
	min-width: 0;
	max-width: 120px;
	padding: 6px 10px;
	border: 1px solid var(--background-modifier-border);
	border-radius: 4px;
	background: var(--background-primary);
	color: var(--text-normal);
	font-size: 13px;
	box-sizing: border-box;
}

.nav-item-fields .nav-url {
	flex: 1;
	/* Takes remaining space */
	min-width: 0;
	padding: 6px 10px;
	border: 1px solid var(--background-modifier-border);
	border-radius: 4px;
	background: var(--background-primary);
	color: var(--text-normal);
	font-size: 13px;
	box-sizing: border-box;
}

.nav-item-fields .nav-title:focus,
.nav-item-fields .nav-url:focus {
	outline: none;
	border-color: var(--interactive-accent);
	box-shadow: 0 0 0 2px var(--interactive-accent-2);
}

.nav-icon-row {
	margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.nav-icon-row .nav-icon {
	width: 50%;
	padding: 6px 10px;
	border: 1px solid var(--background-modifier-border);
	border-radius: 4px;
	background: var(--background-primary);
	color: var(--text-normal);
	font-size: 13px;
}

.nav-icon-row .nav-icon:focus {
	outline: none;
	border-color: var(--interactive-accent);
	box-shadow: 0 0 0 2px var(--interactive-accent-2);
}

/* Social items need special handling for the additional content */
.nav-item:has(.nav-icon-row) {
	flex-direction: column;
	align-items: stretch;
}

.nav-item:has(.nav-icon-row) .nav-item-content {
	width: 100%;
}

.nav-icon-help {
	color: var(--text-muted);
	font-size: 11px;
	flex: 1;
}

.nav-remove {
	padding: 6px;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
}

.nav-child-remove {
	padding: 6px;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	/* Override Obsidian's global button styles that affect child buttons */
	--text-color: var(--text-normal);
	-webkit-app-region: no-drag;
	color: var(--text-color);
	border-radius: var(--button-radius);
	border: 0;
	height: 28px;
	font-weight: var(--input-font-weight);
	cursor: var(--cursor);
	font-family: inherit;
	outline: none;
	user-select: none;
	white-space: nowrap;
}

/* Navigation add button uses Obsidian's native styling */

.nav-icon-help {
	margin-top: 5px;
}

.nav-icon-help small {
	color: var(--text-muted);
	font-size: 11px;
}

.nav-icon-help a {
	color: var(--interactive-accent);
	text-decoration: none;
}

.nav-icon-help a:hover {
	text-decoration: underline;
}


/* Navigation children container - appears on new line */
.nav-children-container {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--background-modifier-border);
	width: 100%;
	display: block;
	clear: both;
}

.nav-children-label {
	font-size: 12px;
	font-weight: 500;
	color: var(--text-muted);
	margin-bottom: 8px;
}

.nav-children {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-left: 16px;
	padding-left: 16px;
	border-left: 2px solid var(--background-modifier-border);
}

.nav-child-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	background: var(--background-secondary);
	border: 1px solid var(--background-modifier-border);
	border-radius: 4px;
}

.nav-child-item .nav-item-fields {
	display: flex;
	flex: 1;
	gap: 10px;
}

.nav-child-item .nav-child-title,
.nav-child-item .nav-child-url {
	padding: 6px 10px;
	border: 1px solid var(--background-modifier-border);
	border-radius: 4px;
	background: var(--background-primary);
	color: var(--text-normal);
	font-size: 13px;
}

.nav-child-item .nav-child-title {
	flex: 0 0 120px;
}

.nav-child-item .nav-child-url {
	flex: 1;
}

.nav-child-item .nav-child-title:focus,
.nav-child-item .nav-child-url:focus {
	outline: none;
	border-color: var(--interactive-accent);
	box-shadow: 0 0 0 2px var(--interactive-accent-2);
}

.nav-item-actions {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-shrink: 0;
	/* Prevent buttons from shrinking */
}

.nav-add-child {
	padding: 6px 12px;
	font-size: 12px;
	white-space: nowrap;
	/* Prevent button text from wrapping */
}

.nav-add {
	margin-top: 10px;
	padding: 8px 16px;
	font-size: 14px;
}

.nav-item:hover {
	background-color: var(--background-modifier-hover);
}

.nav-item:active {
	cursor: grabbing;
}

/* Profile Picture and Comments Options Styling */
.options-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	margin-top: 15px;
}

/* SCOPED to plugin UI only - Profile picture and comments options */
.astro-modular-settings .setting-group,
.astro-modular-wizard .setting-group {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.astro-modular-settings .setting-group label,
.astro-modular-wizard .setting-group label {
	font-weight: 500;
	color: var(--text-normal);
	font-size: 13px;
	margin-bottom: 3px;
}

.astro-modular-settings .setting-group input,
.astro-modular-settings .setting-group select,
.astro-modular-wizard .setting-group input,
.astro-modular-wizard .setting-group select {
	width: 100%;
	padding: 6px 10px;
	border: 1px solid var(--background-modifier-border);
	border-radius: 4px;
	background: var(--background-primary);
	color: var(--text-normal);
	font-size: 13px;
	transition: border-color 0.2s ease;
}

.astro-modular-settings .setting-group input:focus,
.astro-modular-settings .setting-group select:focus,
.astro-modular-wizard .setting-group input:focus,
.astro-modular-wizard .setting-group select:focus {
	outline: none;
	border-color: var(--interactive-accent);
	box-shadow: 0 0 0 2px var(--interactive-accent-2);
}

/* Let Obsidian handle dropdown styling natively */

/* Profile picture and comments options containers */
.profile-picture-options,
.comments-options {
	margin-top: 15px;
	padding: 15px;
	background: var(--background-secondary);
	border-radius: 6px;
}

/* Giscus setup link styling */
.giscus-setup-link {
	margin-bottom: 15px;
	padding: 10px;
	background: var(--background-modifier-border);
	border-radius: 4px;
	border-left: 3px solid var(--interactive-accent);
}

.giscus-setup-link p {
	margin: 0;
	font-size: 13px;
	color: var(--text-muted);
}

.giscus-setup-link a {
	color: var(--interactive-accent);
	text-decoration: none;
}

.giscus-setup-link a:hover {
	text-decoration: underline;
}

/* Theme Colors Tab Styles */
.theme-extraction-timestamp {
	font-size: 12px;
	color: var(--text-muted);
	margin-top: 8px;
	font-style: italic;
}

.color-preview-section {
	margin-top: 20px;
	padding: 15px;
	background: var(--background-secondary);
	border-radius: 8px;
	border: 1px solid var(--background-modifier-border);
}

.color-preview-section h4 {
	margin: 0 0 10px 0;
	color: var(--text-normal);
	font-size: 14px;
}

.color-preview-container {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.color-box {
	width: 20px;
	height: 20px;
	border: 1px solid var(--background-modifier-border);
	border-radius: 3px;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.color-box:hover {
	transform: scale(1.2);
	border-color: var(--interactive-accent);
}

.no-colors-message {
	font-style: italic;
	color: var(--text-muted);
	text-align: center;
	padding: 20px;
	background: var(--background-secondary);
	border-radius: 8px;
	border: 1px solid var(--background-modifier-border);
}

/* Color scale editor improvements */
.color-scale-editor {
	margin: 15px 0;
}

.color-scale-editor .setting-item {
	margin-bottom: 8px;
}

.color-scale-editor .setting-item-name {
	font-size: 12px;
	color: var(--text-muted);
	min-width: 40px;
}

.color-scale-editor .setting-item-control {
	display: flex;
	gap: 8px;
	align-items: center;
}

.color-scale-editor input[type="text"] {
	width: 100px;
	font-family: var(--font-monospace);
	font-size: 12px;
}

.color-scale-editor .color-picker {
	width: 30px;
	height: 30px;
	border: 1px solid var(--background-modifier-border);
	border-radius: 4px;
	cursor: pointer;
}

/* Simple mode color inputs */
.simple-color-inputs {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-top: 15px;
}

.simple-color-input {
	display: flex;
	align-items: center;
	gap: 10px;
}

.simple-color-input label {
	font-weight: 500;
	color: var(--text-normal);
	min-width: 120px;
}

.simple-color-input input[type="text"] {
	width: 100px;
	font-family: var(--font-monospace);
}

.simple-color-input .color-picker {
	width: 30px;
	height: 30px;
	border: 1px solid var(--background-modifier-border);
	border-radius: 4px;
	cursor: pointer;
}

/* Advanced mode sections */
.advanced-mode-section {
	margin: 20px 0;
	padding: 15px;
	background: var(--background-secondary);
	border-radius: 8px;
	border: 1px solid var(--background-modifier-border);
}

.advanced-mode-section h4 {
	margin: 0 0 15px 0;
	color: var(--text-normal);
	font-size: 16px;
	border-bottom: 1px solid var(--background-modifier-border);
	padding-bottom: 8px;
}

/* Save theme section */
.save-theme-section {
	margin-top: 30px;
	padding: 20px;
	background: var(--background-secondary);
	border-radius: 8px;
	border: 1px solid var(--background-modifier-border);
}

.save-theme-section h3 {
	margin: 0 0 10px 0;
	color: var(--text-normal);
}

.save-theme-section p {
	margin: 0 0 15px 0;
	color: var(--text-muted);
	font-size: 14px;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
	.options-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.profile-picture-options,
	.comments-options {
		padding: 10px;
	}

	.color-preview-container {
		gap: 6px;
	}

	.color-box {
		width: 18px;
		height: 18px;
	}

	.simple-color-input {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.simple-color-input label {
		min-width: auto;
	}
}


/* Scoped to only this plugin's settings container to avoid affecting other plugins */


/* Fix checkbox checkmark centering - SCOPED to plugin UI only */
.astro-modular-settings input[type=checkbox]:checked:after,
.astro-modular-wizard input[type=checkbox]:checked:after {
	content: "";
	inset-inline-start: -1px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--checkbox-size);
	height: var(--checkbox-size);
	display: block;
	background-color: var(--checkbox-marker-color);
	mask-position: 52% 52%;
	-webkit-mask-position: 52% 52%;
	mask-size: 65%;
	-webkit-mask-size: 65%;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-image: url("data:image/svg+xml,%3Csvg width='12px' height='10px' viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-4.000000, -6.000000)' fill='%23000000'%3E%3Cpath d='M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='12px' height='10px' viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-4.000000, -6.000000)' fill='%23000000'%3E%3Cpath d='M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ========================================
   Settings Refactor
   ======================================== */

.astro-modular-settings-tab-root {
	display: block;
	min-height: 0;
}

/* Settings tabs layout and navigation */
.astro-modular-settings-tabs {
	display: block;
	min-height: 0;
}

.astro-modular-settings-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--size-2-3);
	flex-shrink: 0;
	margin-bottom: var(--size-4-4);
}

.astro-modular-settings-tab-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	font-size: var(--font-ui-small);
}

/* Specific active state matching Obsidian's clickable-icon behavior but with cta emphasis */
.astro-modular-settings-tab-button.is-active {
	background-color: var(--interactive-accent);
	color: var(--text-on-accent);
}

.astro-modular-settings-tabs-content {
	position: static;
	min-height: 0;
	overflow: visible;
	box-sizing: border-box;
	padding-inline-end: 0;
	padding-bottom: 40px;
}

/* Hide tabs by default, show only active tab */
.astro-modular-settings-tab {
	display: none;
}

.astro-modular-settings-tab.is-active {
	display: block;
}