/*
 * Editor themes. Loaded last by djangoweblogo.html so it can normalize older editor CSS.
 */

:root {
	--editor-bg: #ffffff;
	--editor-surface: #ffffff;
	--editor-surface-2: #f7f7f7;
	--editor-surface-3: #eeeeee;
	--editor-canvas: #f2f2f2;
	--editor-block-workspace: #f0ebce;
	--editor-drawer: #d8d8d8;
	--editor-drawer-2: #eeeeee;
	--editor-tab: #e5e5e5;
	--editor-tab-selected: var(--editor-block-workspace);
	--editor-border: #d1d5db;
	--editor-border-strong: #9ca3af;
	--editor-text: #111827;
	--editor-text-muted: #4b5563;
	--editor-text-subtle: #6b7280;
	--editor-accent: #4a7c29;
	--editor-accent-hover: #3d6622;
	--editor-on-accent: #ffffff;
	--editor-danger: #dc2626;
	--editor-field: #ffffff;
	--editor-hover: #eeeeee;
	--editor-overlay: rgba(0, 0, 0, 0.5);
	--editor-icon-filter: none;
}

[data-theme="high-contrast"] #editorCanvas,
[data-theme="high-contrast"] #editorBlocks,
[data-theme="high-contrast"] #editor-ui-utilities,
[data-theme="high-contrast"] .editor-toolbar {
	--editor-bg: #000000;
	--editor-surface: #000000;
	--editor-surface-2: #000000;
	--editor-surface-3: #111111;
	--editor-canvas: #000000;
	--editor-block-workspace: #000000;
	--editor-drawer: #000000;
	--editor-drawer-2: #000000;
	--editor-tab: #000000;
	--editor-tab-selected: #000000;
	--editor-border: #ffffff;
	--editor-border-strong: #ffffff;
	--editor-text: #ffffff;
	--editor-text-muted: #ffffff;
	--editor-text-subtle: #ffffff;
	--editor-accent: #ffff00;
	--editor-accent-hover: #00ffff;
	--editor-on-accent: #000000;
	--editor-danger: #ff6666;
	--editor-field: #000000;
	--editor-hover: #111111;
	--editor-overlay: rgba(0, 0, 0, 0.86);
	--editor-icon-filter: brightness(0) invert(1);
}

#editorCanvas,
#editorBlocks {
	background: var(--editor-bg);
	color: var(--editor-text);
}

.modal-panel input,
.modal-panel textarea,
.modal-panel select,
.cm-add-input,
#saveVersionNotes {
	background: var(--editor-field);
	border-color: var(--editor-border);
	color: var(--editor-text);
}

#sbTabMount #sbAddPageBtn,
#sbControlsRightMount .sbCopyPasteBar .sbBtnWrapper,
.modal-btn {
	background: var(--editor-surface-2);
	border-color: var(--editor-border);
	color: var(--editor-text-muted);
}

#sbTabMount #sbAddPageBtn:hover,
#sbControlsRightMount .sbCopyPasteBar .sbBtnWrapper:hover,
.modal-btn:hover {
	background: var(--editor-hover);
	color: var(--editor-text);
	border-color: var(--editor-border);
}

#playModeBtn.is-active,
.modal-btn-primary {
	background: var(--editor-accent);
	border-color: var(--editor-accent);
	color: var(--editor-on-accent);
}

#container,
#editorCanvasStage {
	background: var(--editor-canvas);
}

#editorBlocks,
#blockWS {
	background: var(--editor-bg);
}

.cp-opacity {
	accent-color: var(--editor-accent);
}

.modal-panel,
.shape-manager-popup,
.upload-popup,
#starlogo-turtle-helper,
#slnToolBar #slnChanges {
	background: var(--editor-surface);
	border: 1px solid var(--editor-border);
	box-shadow: none;
	color: var(--editor-text);
}

.modal-panel,
.modal-header h2,
.modal-message,
.modal-message strong,
#detailsModal .dm-details,
#detailsModal .dm-details > span,
#detailsModal .dm-gallery-list,
.gm-gallery-item span,
.cm-collab-name,
#dlgViewModal .dlg-body {
	color: var(--editor-text);
}

.gm-gallery-item:hover,
.trait-add:hover {
	background: var(--editor-hover);
	color: var(--editor-text);
}

.modal-subtitle,
.modal-loading,
.modal-empty,
#detailsModal .dm-label,
.gm-privacy-label,
.trait-group-title,
.trait-label,
.trait-count,
.modal-close,
.cm-collab-remove {
	color: var(--editor-text-subtle);
}

.modal-close:hover,
.cm-collab-remove:hover {
	color: var(--editor-text);
}

.modal-backdrop,
body.popup-active::before,
#blanket {
	background: var(--editor-overlay);
}

.modal-btn-danger,
#dlgViewModal .modal-btn-confirm {
	background: var(--editor-danger);
	color: #ffffff;
}

#detailsModal .dm-details > span:not(.dm-label),
.trait-group + .trait-group,
.trait-list,
.trait-item,
.trait-item > .trait-field + .trait-field,
.trait-item > .trait-field + .trait-item-remove,
.trait-add,
#errorTitleBar,
#errorList li {
	border-color: var(--editor-border);
}

#saveVersionNotes,
.cm-add-input,
.trait-field > select,
.trait-field > input[type="text"],
.trait-item > .trait-field > input[type="text"] {
	background: var(--editor-field);
	border-color: var(--editor-border);
	color: var(--editor-text);
}

.trait-list,
.trait-field > input[type="text"]:hover,
.trait-field > select:hover,
.trait-item > .trait-field > input[type="text"]:hover {
	background: var(--editor-surface-2);
}

#sbMainColumn > #sbCanvasHeader,
#sbCanvasMount,
.sbPageHolder,
.sbPage {
	background: var(--editor-block-workspace) !important;
	border-color: var(--editor-border-strong);
}

[data-theme="high-contrast"] .sbWorkspaceV3 .sbDrawerHolder,
[data-theme="high-contrast"] .sbWorkspaceV3 .sbDrawerHolder .sbDrawers,
[data-theme="high-contrast"] .sbDrawers,
[data-theme="high-contrast"] .sbDrawer {
	background: var(--editor-drawer) !important;
}

[data-theme="high-contrast"] .sbWorkspaceV3 .sbDrawerHolder {
	border-right: 1px solid var(--editor-border);
}

[data-theme="high-contrast"] .sbDrawer + .sbDrawer {
	border-top: 1px solid var(--editor-border);
}

[data-theme="high-contrast"] .sbDrawerCTA {
	color: var(--editor-text-muted);
	text-shadow: none;
}

[data-theme="high-contrast"] .sbPicker,
[data-theme="high-contrast"] .sbPickerOptions,
[data-theme="high-contrast"] .sbList select {
	background-color: var(--editor-drawer-2);
	border-color: var(--editor-border);
	color: var(--editor-text);
	text-shadow: none;
}

[data-theme="high-contrast"] .sbPicker {
	border-bottom-color: var(--editor-border);
}

[data-theme="high-contrast"] .sbPickerLabel,
[data-theme="high-contrast"] .sbOptionText,
[data-theme="high-contrast"] .sbPickerOptions li,
[data-theme="high-contrast"] .sbBlock .sbPickerLabel {
	color: var(--editor-text);
	text-shadow: none;
}

[data-theme="high-contrast"] .sbPickerOptions {
	box-shadow: none;
}

[data-theme="high-contrast"] .sbPickerOptions li {
	border-bottom-color: var(--editor-border);
}

[data-theme="high-contrast"] .sbPickerOptions li:hover {
	background: var(--editor-hover);
}

[data-theme="high-contrast"] .sbPicker:hover .sbPickerLabel,
[data-theme="high-contrast"] .sbPickerOptions li:hover .sbOptionText {
	color: var(--editor-text);
	text-shadow: none;
}

.sbWorkspaceV3 .project-tab-bar .project-tab {
	background: var(--editor-tab);
	border-color: var(--editor-border-strong);
	color: var(--editor-text-muted);
	text-shadow: none;
}

.sbWorkspaceV3 .project-tab-bar .project-tab:hover {
	background: var(--editor-hover);
	color: var(--editor-text);
}

.sbWorkspaceV3 .project-tab-bar .project-tab.is-selected {
	background: var(--editor-tab-selected);
	border-color: var(--editor-border-strong);
	border-bottom-color: var(--editor-tab-selected);
	color: var(--editor-text);
}

.sbWorkspaceV3 .sbPageV3 {
	background-color: var(--editor-block-workspace) !important;
}

[data-theme="high-contrast"] .sbWorkspaceV3 .sbDrawerResizeHandle::before {
	background: var(--editor-border-strong);
}

[data-theme="high-contrast"] .sbWorkspaceV3 .sbDrawerHolder .sbDrawers {
	scrollbar-color: var(--editor-border-strong) transparent;
}

[data-theme="high-contrast"] .sbWorkspaceV3 .sbDrawerHolder .sbDrawers::-webkit-scrollbar-thumb,
[data-theme="high-contrast"] .sbPickerOptions::-webkit-scrollbar-thumb {
	background: var(--editor-border-strong);
}

[data-theme="high-contrast"] .sbWorkspaceV3 .sbDrawerHolder .sbDrawers::-webkit-scrollbar-thumb:hover {
	background: var(--editor-text-subtle);
}

.sbContext ul {
	border-color: var(--editor-border);
	box-shadow: none;
}

.sbContext li {
	background: var(--editor-surface-2);
	border-bottom-color: var(--editor-border);
	color: var(--editor-text);
	text-shadow: none;
}

.sbContext li:hover {
	background: #1a85ff;
	color: #fff;
}

.sbContext li.disabled,
.sbContext li.disabled:hover {
	background: var(--editor-surface-2);
	color: var(--editor-text-subtle);
}

#sbTabMount #sbAddPageBtn,
#sbControlsRightMount .sbCopyPasteBar {
	background: var(--editor-surface-2);
	border-color: var(--editor-border);
	box-shadow: none;
}

#sbControlsRightMount .sbCopyPasteBar .sbCopyBtn,
#sbControlsRightMount .sbCopyPasteBar .sbCutBtn,
#sbControlsRightMount .sbCopyPasteBar .sbPasteBtn {
	filter: var(--editor-icon-filter);
}

.slnEditBreedBtn .icon-mask {
	background-color: currentColor;
	color: var(--editor-text-muted);
}

#errorPanel,
#errorList,
#slnChangeList {
	background: var(--editor-surface);
	color: var(--editor-text);
}

#errorTitleBar,
#errorList li:nth-child(even),
#slnToolBar .sln-undo-pointer {
	background: var(--editor-surface-2);
	color: var(--editor-text);
}

#errorList li:nth-child(odd) {
	background: var(--editor-surface);
}

#errorList li:hover {
	background: var(--editor-hover);
}

#errorCount,
#closeChecker,
#slnToolBar #slnChangeList li,
#slnToolBar .sln-redo,
#slnToolBar .sln-nochanges {
	color: var(--editor-text-muted);
}

#starlogo-turtle-helper .chat-header,
#starlogo-turtle-helper .settings-dropdown,
#starlogo-turtle-helper .chat-input-container,
#starlogo-turtle-helper .agentic-task-panel {
	background: var(--editor-surface-2);
	border-color: var(--editor-border);
	color: var(--editor-text);
}

#starlogo-turtle-helper .header-btn,
#starlogo-turtle-helper .settings-dropdown select,
#starlogo-turtle-helper #message-input {
	background: var(--editor-field);
	border-color: var(--editor-border);
	color: var(--editor-text);
}

#starlogo-turtle-helper .new-chat-btn,
#starlogo-turtle-helper .send-btn,
#starlogo-turtle-helper .interactive-toggle.active .toggle-track {
	background: var(--editor-accent);
	color: var(--editor-on-accent);
}

#starlogo-turtle-helper .user-message {
	background: var(--editor-accent);
	color: var(--editor-on-accent);
}

#starlogo-turtle-helper .assistant-message,
#starlogo-turtle-helper .example-prompt,
#starlogo-turtle-helper .markdown-content {
	color: var(--editor-text);
}

.shape-manager-popup .shape-manager-close,
.upload-popup .upload-close,
.shape-manager-popup .asset-header,
.upload-popup .asset-header,
.shape-manager-popup .assetItem,
.shape-manager-popup .assetPreview p {
	color: var(--editor-text-muted);
}

.shape-manager-popup .shape-manager-close:hover,
.upload-popup .upload-close:hover,
.shape-manager-popup .assetPreview p:hover {
	color: var(--editor-text);
}

.shape-manager-popup .shape-upload-btn,
.shape-manager-popup .shape-search-input,
.upload-popup input[type="text"],
.upload-popup textarea,
.upload-popup input[type="submit"] {
	background: var(--editor-field);
	border-color: var(--editor-border);
	color: var(--editor-text);
}

.shape-manager-popup .assetItem:hover,
.shape-manager-popup .assetPreview p {
	background: var(--editor-hover);
}

.shape-manager-popup .shape-manager-search-panel {
	border-right-color: var(--editor-border);
}

[data-theme="high-contrast"] .modal-panel,
[data-theme="high-contrast"] #starlogo-turtle-helper,
[data-theme="high-contrast"] .sbWorkspaceV3 .sbDrawerHolder,
[data-theme="high-contrast"] .sbPicker,
[data-theme="high-contrast"] .sbExpanded.sbPickerOptions,
[data-theme="high-contrast"] .sbContext ul,
[data-theme="high-contrast"] .sbWorkspaceV3 .project-tab-bar .project-tab {
	border-width: 2px;
}