/* Diagram workspace theme tokens — Planner + Explorer share --de-* via data-theme */

.diagram-editor-page,
.diagram-editor-page[data-theme="dark"],
.explorer-shell,
.explorer-shell[data-theme="dark"] {
    --de-bg: #0f1720;
    --de-surface: #18212d;
    --de-surface-raised: #1b2430;
    --de-surface-sunken: #101823;
    --de-border: rgba(255, 255, 255, 0.08);
    --de-border-strong: rgba(255, 255, 255, 0.12);
    --de-text: rgba(255, 255, 255, 0.88);
    --de-text-strong: rgba(255, 255, 255, 0.92);
    --de-text-muted: rgba(255, 255, 255, 0.72);
    --de-text-subtle: rgba(255, 255, 255, 0.58);
    --de-text-faint: rgba(255, 255, 255, 0.52);
    --de-btn-bg: #253142;
    --de-btn-bg-hover: #304055;
    --de-btn-bg-active: #223041;
    --de-btn-bg-disabled: rgba(37, 49, 66, 0.72);
    --de-btn-border: rgba(255, 255, 255, 0.11);
    --de-btn-text: rgba(255, 255, 255, 0.9);
    --de-btn-text-disabled: rgba(255, 255, 255, 0.38);
    --de-input-bg: #101823;
    --de-input-border: rgba(255, 255, 255, 0.12);
    --de-input-text: rgba(255, 255, 255, 0.92);
    --de-input-placeholder: rgba(255, 255, 255, 0.45);
    --de-caret: #f7941d;
    --de-focus-ring: rgba(96, 165, 250, 0.45);
    --de-focus-ring-soft: rgba(96, 165, 250, 0.22);
    --de-canvas-bg: #101823;
    --de-canvas-bg-end: #0b121a;
    --de-canvas-empty-bg: #0e1620;
    --de-canvas-empty-bg-end: #0a1018;
    --de-canvas-border: rgba(255, 255, 255, 0.08);
    --de-canvas-selection: rgba(96, 165, 250, 0.22);
    --de-canvas-connector-selection: rgba(255, 107, 107, 0.28);
    --de-spinner-track: rgba(255, 255, 255, 0.3);
    --de-spinner-head: rgba(255, 255, 255, 0.95);
    --de-hover-accent: rgba(247, 148, 29, 0.45);
    --de-accent-bg: rgba(37, 99, 235, 0.24);
    --de-accent-bg-strong: rgba(37, 99, 235, 0.28);
    --de-accent-bg-hover: rgba(37, 99, 235, 0.4);
    --de-accent-border: rgba(96, 165, 250, 0.45);
    --de-accent-text: #93c5fd;
    --de-accent-text-strong: #dbeafe;
    --de-orange-text: #fdba74;
    --de-orange-bg: rgba(249, 115, 22, 0.18);
    --de-orange-border: rgba(249, 115, 22, 0.35);
    --de-green-text: #86efac;
    --de-green-bg: rgba(34, 197, 94, 0.16);
    --de-green-border: rgba(74, 222, 128, 0.35);
    --de-green-bg-strong: rgba(6, 95, 70, 0.22);
    --de-green-border-strong: rgba(74, 222, 128, 0.38);
    --de-green-text-strong: rgba(255, 255, 255, 0.9);
    --de-red-text: #fecaca;
    --de-red-bg: rgba(153, 27, 27, 0.24);
    --de-red-border: rgba(248, 113, 113, 0.45);
    --de-red-bg-hover: rgba(127, 29, 29, 0.35);
    --de-warning-bg: rgba(120, 53, 15, 0.22);
    --de-warning-border: rgba(251, 191, 36, 0.35);
    --de-warning-accent: rgba(249, 115, 22, 0.85);
    --de-info-bg: rgba(30, 64, 175, 0.22);
    --de-info-border: rgba(96, 165, 250, 0.4);
    --de-info-banner-bg: rgba(30, 58, 138, 0.22);
    --de-info-banner-border: rgba(96, 165, 250, 0.28);
    --de-chip-bg: rgba(255, 255, 255, 0.07);
    --de-chip-text: rgba(255, 255, 255, 0.82);
    --de-chip-muted-bg: rgba(255, 255, 255, 0.04);
    --de-chip-selection-bg: rgba(37, 99, 235, 0.16);
    --de-chip-selection-border: rgba(96, 165, 250, 0.28);
    --de-chip-selection-text: #bfdbfe;
    --de-version-active-bg: rgba(37, 99, 235, 0.16);
    --de-version-active-border: rgba(96, 165, 250, 0.55);
    --de-version-stat-bg: rgba(255, 255, 255, 0.06);
    --de-version-count-bg: rgba(255, 255, 255, 0.1);
    --de-version-count-text: rgba(255, 255, 255, 0.78);
    --de-skeleton: rgba(255, 255, 255, 0.08);
    --de-skeleton-shine: rgba(255, 255, 255, 0.12);
    --de-overlay: rgba(11, 18, 26, 0.72);
    --de-code-bg: rgba(15, 23, 42, 0.55);
    --de-mobile-menu-bg: rgba(15, 23, 32, 0.98);
    --de-mobile-menu-border: rgba(255, 255, 255, 0.14);
    --de-selector-stroke: rgba(96, 165, 250, 0.85);
    --de-interactable-hover: brightness(1.06);
    --de-selection-bg: rgba(247, 148, 29, 0.38);
    --de-shadow-soft: none;
    --de-shadow-panel: none;
}

html[data-planner-theme="light"] .diagram-editor-page,
.diagram-editor-page[data-theme="light"],
html[data-planner-theme="light"] .explorer-shell,
.explorer-shell[data-theme="light"] {
    --de-bg: #e2e6ed;
    --de-surface: #e8ecf2;
    --de-surface-raised: #dfe3ea;
    --de-surface-sunken: #dde3ea;
    --de-panel: #e8ecf2;
    --de-border: #c8d0db;
    --de-border-strong: #b5beca;
    --de-text: #1f2937;
    --de-text-strong: #111827;
    --de-text-muted: #6b7280;
    --de-text-subtle: #6b7280;
    --de-text-faint: #9ca3af;
    --de-btn-bg: #f0f2f6;
    --de-btn-bg-hover: #e6eaf1;
    --de-btn-bg-active: #d8dee8;
    --de-btn-bg-disabled: #e4e8ef;
    --de-btn-border: #bfc8d4;
    --de-btn-text: #1f2937;
    --de-btn-text-disabled: #9ca3af;
    --de-input-bg: #f2f4f8;
    --de-input-border: #b5beca;
    --de-input-text: #1f2937;
    --de-input-placeholder: #9ca3af;
    --de-caret: #2563eb;
    --de-focus-ring: rgba(37, 99, 235, 0.42);
    --de-focus-ring-soft: rgba(37, 99, 235, 0.16);
    --de-canvas-bg: #b8c1ce;
    --de-canvas-bg-end: #acb6c4;
    --de-canvas-empty-bg: #b2bcc9;
    --de-canvas-empty-bg-end: #a8b2c0;
    --de-canvas-border: #a0aab8;
    --de-canvas-selection: rgba(59, 110, 185, 0.24);
    --de-canvas-connector-selection: rgba(157, 72, 76, 0.26);
    --de-spinner-track: rgba(31, 41, 55, 0.14);
    --de-spinner-head: #374151;
    --de-hover-accent: #94a3b8;
    --de-accent-bg: rgba(59, 110, 185, 0.12);
    --de-accent-bg-strong: rgba(59, 110, 185, 0.16);
    --de-accent-bg-hover: rgba(59, 110, 185, 0.22);
    --de-accent-border: #8eb0dc;
    --de-accent-text: #2f5f9e;
    --de-accent-text-strong: #244f87;
    --de-orange-text: #b45309;
    --de-orange-bg: rgba(245, 158, 11, 0.12);
    --de-orange-border: rgba(217, 119, 6, 0.3);
    --de-green-text: #166534;
    --de-green-bg: rgba(22, 163, 74, 0.12);
    --de-green-border: rgba(22, 163, 74, 0.28);
    --de-green-bg-strong: rgba(22, 163, 74, 0.14);
    --de-green-border-strong: rgba(22, 163, 74, 0.32);
    --de-green-text-strong: #14532d;
    --de-red-text: #9f3a3f;
    --de-red-bg: rgba(181, 71, 75, 0.12);
    --de-red-border: rgba(181, 71, 75, 0.3);
    --de-red-bg-hover: rgba(181, 71, 75, 0.16);
    --de-warning-bg: rgba(245, 158, 11, 0.12);
    --de-warning-border: rgba(217, 119, 6, 0.28);
    --de-warning-accent: #b45309;
    --de-info-bg: rgba(59, 110, 185, 0.12);
    --de-info-border: rgba(59, 110, 185, 0.26);
    --de-info-banner-bg: rgba(59, 110, 185, 0.1);
    --de-info-banner-border: rgba(59, 110, 185, 0.22);
    --de-chip-bg: #dde3ea;
    --de-chip-text: #374151;
    --de-chip-muted-bg: #e4e8ef;
    --de-chip-selection-bg: rgba(59, 110, 185, 0.12);
    --de-chip-selection-border: rgba(59, 110, 185, 0.24);
    --de-chip-selection-text: #2f5f9e;
    --de-version-active-bg: rgba(59, 110, 185, 0.1);
    --de-version-active-border: rgba(59, 110, 185, 0.34);
    --de-version-stat-bg: #dde3ea;
    --de-version-count-bg: #b8c1ce;
    --de-version-count-text: #6b7280;
    --de-skeleton: rgba(31, 41, 55, 0.06);
    --de-skeleton-shine: rgba(31, 41, 55, 0.09);
    --de-overlay: rgba(226, 230, 237, 0.9);
    --de-code-bg: #e4e8ef;
    --de-mobile-menu-bg: rgba(232, 236, 242, 0.98);
    --de-mobile-menu-border: #c8d0db;
    --de-selector-stroke: rgba(59, 110, 185, 0.72);
    --de-interactable-hover: brightness(0.985);
    --de-selection-bg: rgba(37, 99, 235, 0.22);
    --de-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.06);
    --de-shadow-panel: 0 1px 2px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.05);
}

html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-btn-primary:not(:disabled),
.diagram-editor-page[data-theme="light"] .diagram-editor-btn-primary:not(:disabled) {
    color: var(--de-accent-text-strong);
}

html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-version-action-restore:not(:disabled),
.diagram-editor-page[data-theme="light"] .diagram-editor-version-action-restore:not(:disabled) {
    color: var(--de-accent-text-strong);
}

html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-version-badge-draft,
.diagram-editor-page[data-theme="light"] .diagram-editor-version-badge-draft {
    color: var(--de-accent-text);
}

html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-version-badge-active,
html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-version-badge-latest,
.diagram-editor-page[data-theme="light"] .diagram-editor-version-badge-active,
.diagram-editor-page[data-theme="light"] .diagram-editor-version-badge-latest {
    color: var(--de-accent-text-strong);
}

html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-save-status.is-autosaved,
html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-save-status.is-saving,
.diagram-editor-page[data-theme="light"] .diagram-editor-save-status.is-autosaved,
.diagram-editor-page[data-theme="light"] .diagram-editor-save-status.is-saving {
    color: var(--de-accent-text);
}

html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-versions-draft-status.is-autosaved,
.diagram-editor-page[data-theme="light"] .diagram-editor-versions-draft-status.is-autosaved {
    color: var(--de-accent-text);
}

html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-status-badge-beta,
html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-status-chip-warning,
html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-save-status.is-dirty,
html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-versions-draft-status.is-dirty,
.diagram-editor-page[data-theme="light"] .diagram-editor-status-badge-beta,
.diagram-editor-page[data-theme="light"] .diagram-editor-status-chip-warning,
.diagram-editor-page[data-theme="light"] .diagram-editor-save-status.is-dirty,
.diagram-editor-page[data-theme="light"] .diagram-editor-versions-draft-status.is-dirty {
    color: var(--de-orange-text);
}

html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-save-status.is-saved,
.diagram-editor-page[data-theme="light"] .diagram-editor-save-status.is-saved {
    color: var(--de-green-text);
}

html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-version-badge,
.diagram-editor-page[data-theme="light"] .diagram-editor-version-badge {
    color: var(--de-orange-text);
}

html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-version-action-delete:not(:disabled),
.diagram-editor-page[data-theme="light"] .diagram-editor-version-action-delete:not(:disabled) {
    color: var(--de-red-text);
}

html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-btn-theme.is-active,
.diagram-editor-page[data-theme="light"] .diagram-editor-btn-theme.is-active {
    background: var(--de-accent-bg-strong);
    border-color: var(--de-accent-border);
    color: var(--de-accent-text-strong);
}

/* Panel depth — light mode only */
html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-toolbar,
html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-statusbar,
html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-versions-panel,
html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-rename-panel,
html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-export-panel,
html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-loading-copy,
.diagram-editor-page[data-theme="light"] .diagram-editor-toolbar,
.diagram-editor-page[data-theme="light"] .diagram-editor-statusbar,
.diagram-editor-page[data-theme="light"] .diagram-editor-versions-panel,
.diagram-editor-page[data-theme="light"] .diagram-editor-rename-panel,
.diagram-editor-page[data-theme="light"] .diagram-editor-export-panel,
.diagram-editor-page[data-theme="light"] .diagram-editor-loading-copy {
    box-shadow: var(--de-shadow-panel);
}

html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-canvas-shell,
html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-canvas-host,
.diagram-editor-page[data-theme="light"] .diagram-editor-canvas-shell,
.diagram-editor-page[data-theme="light"] .diagram-editor-canvas-host {
    box-shadow: var(--de-shadow-soft);
}

html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-version-item,
.diagram-editor-page[data-theme="light"] .diagram-editor-version-item {
    box-shadow: var(--de-shadow-soft);
}

html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-btn:hover:not(:disabled),
.diagram-editor-page[data-theme="light"] .diagram-editor-btn:hover:not(:disabled) {
    border-color: var(--de-border-strong);
}

html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-btn.is-active,
html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-btn-theme.is-active,
.diagram-editor-page[data-theme="light"] .diagram-editor-btn.is-active,
.diagram-editor-page[data-theme="light"] .diagram-editor-btn-theme.is-active {
    box-shadow: inset 0 0 0 1px var(--de-accent-border);
}

/* Override global dark-input rules for planner light mode */
html[data-planner-theme="light"] .diagram-editor-page input.diagram-editor-input[type="text"],
.diagram-editor-page[data-theme="light"] input.diagram-editor-input[type="text"] {
    color: var(--de-input-text) !important;
    -webkit-text-fill-color: var(--de-input-text) !important;
    caret-color: var(--de-caret) !important;
    background-color: var(--de-input-bg) !important;
    color-scheme: light;
}

html[data-planner-theme="light"] .diagram-editor-page input.diagram-editor-input[type="text"]::placeholder,
.diagram-editor-page[data-theme="light"] input.diagram-editor-input[type="text"]::placeholder {
    color: var(--de-input-placeholder) !important;
    -webkit-text-fill-color: var(--de-input-placeholder) !important;
    opacity: 1 !important;
}

html[data-planner-theme="light"] .diagram-editor-page input.diagram-editor-input[type="text"]::-webkit-input-placeholder,
.diagram-editor-page[data-theme="light"] input.diagram-editor-input[type="text"]::-webkit-input-placeholder {
    color: var(--de-input-placeholder) !important;
    -webkit-text-fill-color: var(--de-input-placeholder) !important;
}

html[data-planner-theme="light"] .diagram-editor-page input.diagram-editor-input[type="text"]::-moz-placeholder,
.diagram-editor-page[data-theme="light"] input.diagram-editor-input[type="text"]::-moz-placeholder {
    color: var(--de-input-placeholder) !important;
    opacity: 1 !important;
}

html[data-planner-theme="light"] .diagram-editor-page input.diagram-editor-input[type="text"]:focus,
.diagram-editor-page[data-theme="light"] input.diagram-editor-input[type="text"]:focus {
    color: var(--de-input-text) !important;
    -webkit-text-fill-color: var(--de-input-text) !important;
    caret-color: var(--de-caret) !important;
}

html[data-planner-theme="light"] .diagram-editor-page input.diagram-editor-input[type="text"]:-webkit-autofill,
html[data-planner-theme="light"] .diagram-editor-page input.diagram-editor-input[type="text"]:-webkit-autofill:hover,
html[data-planner-theme="light"] .diagram-editor-page input.diagram-editor-input[type="text"]:-webkit-autofill:focus,
.diagram-editor-page[data-theme="light"] input.diagram-editor-input[type="text"]:-webkit-autofill,
.diagram-editor-page[data-theme="light"] input.diagram-editor-input[type="text"]:-webkit-autofill:hover,
.diagram-editor-page[data-theme="light"] input.diagram-editor-input[type="text"]:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--de-input-text) !important;
    caret-color: var(--de-caret) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--de-input-bg) inset !important;
}

html[data-planner-theme="light"] .diagram-editor-page input.diagram-editor-input[type="text"]::selection,
.diagram-editor-page[data-theme="light"] input.diagram-editor-input[type="text"]::selection {
    background-color: var(--de-selection-bg);
    color: var(--de-text-strong);
}

html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-export-source,
.diagram-editor-page[data-theme="light"] .diagram-editor-export-source {
    caret-color: var(--de-caret);
    color-scheme: light;
}

html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-export-source::selection,
.diagram-editor-page[data-theme="light"] .diagram-editor-export-source::selection {
    background-color: var(--de-selection-bg);
    color: var(--de-text-strong);
}

html[data-planner-theme="light"] .diagram-editor-page .diagram-editor-versions-accordion > .diagram-editor-versions-accordion-summary::after,
.diagram-editor-page[data-theme="light"] .diagram-editor-versions-accordion > .diagram-editor-versions-accordion-summary::after {
    color: var(--de-text-faint);
}