:root {
    color-scheme: light dark;
    --primary-color: #7c3aed;
    --border-color: #d1d5db;
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-primary: #6610f2;
    --bs-secondary: #6f42c1;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --app-bg: #1a1a1a;
    --app-text: #ffffff;
    --menu-bg: #252525;
    --menu-hover: #333333;
    --menu-hover-light: #e7e7e7;
    --border-color: #404040;
    --primary-color: #6610f2;
    --primary-hover: #5a0ed6;
    --secondary-bg: #2d2d2d;
    /* Dark theme colors (for top bar) */
    --topbar-bg: #1a1a1a;
    --topbar-text: #ffffff;
    --topbar-hover: #333333;
    --topbar-hover-text: var(--topbar-bg);
    --topbar-border: #404040;

    /* Light theme colors (for content) */
    --app-bg: #ffffff;
    --app-text: #333333;
    --panel-bg: #f5f5f5;
    --border-color: #e0e0e0;
    --hover-bg: #eaeaea;

    /* Accent colors */
    --primary-color: #6610f2;
    --primary-hover: #5a0ed6;
    --selection-color: #6610f2;
    --selection-hover: rgba(102, 16, 242, 0.1);
}

/* Body & HTML settings. */
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--app-bg);
    color: var(--app-text);
    font-family: 'Gellix', sans-serif;
}

.app-container {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100vh;
}

.main-toolbar {
    background-color: var(--menu-bg);
    padding: 4px;
    border-bottom: 1px solid var(--border-color);
}

.main-content {
    display: grid;
    grid-template-columns: minmax(200px, 20%) 1fr minmax(200px, 20%);
    overflow: hidden;
}

/* Left Panel - TreeView */
.left-panel {
    background-color: var(--app-bg);
    border-right: 1px solid var(--border-color);
    overflow: auto;
    resize: horizontal;
}

/* Center Panel */
.center-panel {
    display: grid;
    grid-template-rows: 1fr auto;
    background-color: var(--app-bg);
    overflow: hidden;
}

.editor-area {
    overflow: auto;
}

.bottom-panel {
    height: 200px;
    background-color: var(--menu-bg);
    border-top: 1px solid var(--border-color);
    overflow: auto;
    resize: vertical;
}

/* Right Panel - Properties */
.right-panel {
    background-color: var(--menu-bg);
    border-left: 1px solid var(--border-color);
    overflow: auto;
    resize: horizontal;
}

/* Resize Handles */
.resize-handle {
    width: 4px;
    background-color: var(--border-color);
    cursor: col-resize;
}

.resize-handle:hover {
    background-color: var(--primary-color);
}

/* Tabs */
.tabs {
    display: flex;
    background-color: var(--menu-bg);
    border-bottom: 1px solid var(--border-color);
}

.tab {
    padding: 8px 16px;
    background-color: var(--app-bg);
    border: 1px solid var(--border-color);
    border-bottom: none;
    margin-right: 2px;
    cursor: pointer;
    -webkit-user-select: none;
}

.tab.active {
    background-color: var(--menu-bg);
    border-bottom: 1px solid var(--menu-bg);
}

@media (prefers-color-scheme: dark) {
    body {
        background: #333;
        color: white;
    }
}

@media (prefers-color-scheme: light) {
    body {
        background: #fff;
        color: black;
    }
}

/* Style for the links */
.link {
    stroke: #999;
    stroke-width: 2px;
}

/* Style for the nodes */
.node circle {
    cursor: pointer;
}

.node rect {
    cursor: pointer;
}

.node path {
    cursor: pointer;
}

/* Style for the hover line */
.hover-line {
    stroke: transparent;
    stroke-width: 10px;
    /* 5 pixels above and below the line */
}

/* Style for the midpoint circles */
.midpoint circle {
    cursor: pointer;
}

/* Style for the midpoint text */
.midpoint text {
    font-size: 8px;
    text-anchor: middle;
    color: white;
}

#mindmap-container {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Prevent scrollbars */
}

.mindmap-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Prevent scrollbars */
}

.root-left-button,
.root-right-button,
.add-button-left,
.add-button-right,
.add-icon-left,
.add-icon-right {
    pointer-events: all;
    z-index: 1001;
    /* Ensure buttons are on top */
}

/* TopBar */

/* topbar.css */
.topbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    background-color: #000000;
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.menu-group {
    display: flex;
    align-items: center;
}

.menu {
    position: relative;
}

.menu-button {
    padding: 8px 16px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

.menu-button:hover {
    background-color: #7c3aed;
}

.menu-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #000000;
    border: 1px solid #374151;
    min-width: 256px;
    z-index: 1000;
}

.menu-content-right {
    left: auto;
    right: 0;
}

.menu:hover .menu-content {
    display: block;
}

.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 8px 16px;
    background: none;
    border: none;
    color: white;
    text-align: left;
    cursor: pointer;
}

.menu-item:hover {
    background-color: #7c3aed;
}

.shortcut {
    color: #9ca3af;
    font-size: 0.875rem;
    margin-left: 16px;
}

.separator {
    height: 1px;
    background-color: #374151;
    margin: 4px 0;
}

.submenu {
    position: relative;
}

.submenu-content {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background-color: #000000;
    border: 1px solid #374151;
    min-width: 256px;
}

.submenu:hover .submenu-content {
    display: block;
}

.chevron-right {
    margin-left: 8px;
}

.action-buttons {
    display: flex;
    gap: 8px;
    padding: 0 16px;
}

.icon-button {
    padding: 8px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 4px;
}

.icon-button:hover {
    background-color: #7c3aed;
}

.avatar-button {
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
}

.avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #6b7280;
}

/* Module Menu */
/* treeview.css */
.treeview {
    background: #ffffff;
    color: #333333;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.treeview-toolbar {
    padding: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.treeview-content {
    flex: 1;
    overflow: auto;
    padding: 8px;
}

.tree-node {
    margin: 2px 0;
}

.node-content {
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
}

.node-content:hover {
    background: #f3f4f6;
}

.node-content.selected {
    background: #7c3aed;
    color: white;
}

.toggle-button {
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.toggle-placeholder {
    width: 20px;
}

.node-icon {
    margin: 0 4px;
}

.node-children {
    margin-left: 24px;
}

.context-menu {
    position: fixed;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.context-menu .menu-item {
    display: block;
    width: 100%;
    padding: 8px 16px;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
}

.context-menu .menu-item:hover {
    background: #f3f4f6;
    color: black;
}

.expanded>.node-content>.toggle-button {
    transform: rotate(90deg);
}

/* treeview.css */
.tree-node {
    margin: 2px 0;
    color: black;
}

.node-content {
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    color: black;
}

.context-menu {
    position: fixed;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 160px;
}

.context-menu .menu-item {
    display: block;
    width: 100%;
    padding: 8px 16px;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    color: black;
    font-size: 14px;
}

.toggle-button {
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
}

.node-name {
    margin-left: 4px;
    color: black;
}

.expanded>.node-content>.toggle-button {
    transform: rotate(90deg);
}

/* Add these new styles for better visual hierarchy */
.tree-node[data-node-type="MODULE"]>.node-content {
    font-weight: 500;
}

.tree-node[data-node-type="MINDMAP"]>.node-content,
.tree-node[data-node-type="WORKFLOW"]>.node-content,
.tree-node[data-node-type="DDA"]>.node-content {
    padding-left: 8px;
}

/* Adjust selected state to maintain contrast */
.node-content.selected .node-name,
.node-content.selected .toggle-button {
    color: white;
}

/* Add these styles to your existing CSS */
.node-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin: 0 8px;
}

.node-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.node-content:hover .node-icon svg {
    stroke: currentColor;
}

.node-content.selected .node-icon svg {
    stroke: white;
}

/* Ensure proper alignment */
.node-content {
    display: flex;
    align-items: center;
    padding: 6px 4px;
    border-radius: 4px;
    cursor: pointer;
    color: black;
}

/* treeview.css */
.toggle-button {
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-size: 10px;
    transition: transform 0.15s ease;
}

/* Remove any existing transform for expanded state */
.expanded>.node-content>.toggle-button {
    transform: none;
}

/* Add transform for collapsed state */
.tree-node:not(.expanded)>.node-content>.toggle-button {
    transform: rotate(-90deg);
}

/* Optional: Add smooth transition */
.tree-node {
    transition: all 0.15s ease;
}

/* Ensure proper spacing */
.node-icon {
    margin: 0 4px;
}

.node-name {
    margin-left: 4px;
}

/* Add/update these styles in your CSS */
.toggle-button {
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-size: 12px;
    -webkit-user-select: none;
    margin-right: 4px;
}

.toggle-button:hover {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.toggle-placeholder {
    width: 20px;
    height: 20px;
}

.node-content {
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    -webkit-user-select: none;
}

/* Ensure toggle button doesn't trigger selection highlight */
.node-content.selected .toggle-button {
    color: white;
}

.node-content:hover .toggle-button {
    opacity: 1;
}

/* Add these styles to your CSS */
.node-name {
    padding: 2px 4px;
    border-radius: 3px;
    margin-left: 4px;
    -webkit-user-select: none;
}

.tree-node:hover .node-name {
    background-color: rgba(0, 0, 0, 0.05);
}

.node-content.selected:hover .node-name {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Add these styles to your CSS */
.node-content {
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 4px;
}

.edit-button {
    opacity: 0;
    background: none;
    border: none;
    padding: 2px;
    margin-left: 4px;
    cursor: pointer;
    color: #666;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.node-content:hover .edit-button {
    opacity: 1;
}

.edit-button:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: #000;
}

.node-content.selected .edit-button {
    color: white;
}

.node-content.selected .edit-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Toolbar Styles */
.treeview-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px;
    background-color: var(--menu-bg);
    border-bottom: 1px solid var(--border-color);
}

.toolbar-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--app-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

.toolbar-button:hover {
    background-color: var(--menu-hover-light);
    border-color: var(--primary-color);
}

.toolbar-button svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
}

.toolbar-button:hover svg {
    stroke: var(--primary-color);
}

/* Add tooltips */
.toolbar-button {
    position: relative;
}

/* Separator for groups of buttons */
.toolbar-button+.toolbar-button {
    margin-left: 4px;
}

/* Model Dialog */
/* modal.css */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    border-radius: 8px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.modal-header {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px;
    color: #6b7280;
}

.modal-body {
    padding: 16px;
}

.modal-footer {
    padding: 16px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group label {
    font-weight: 500;
    color: #374151;
}

.modal-input {
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 1rem;
}

.modal-input:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1);
}

.modal-cancel {
    padding: 8px 16px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
}

.modal-confirm {
    padding: 8px 16px;
    background: #7c3aed;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.modal-confirm:hover {
    background: #6d28d9;
}

.modal-cancel:hover {
    background: #e5e7eb;
}

/* Top Bar - Dark Theme */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    background-color: var(--topbar-bg);
    color: var(--topbar-text);
    border-bottom: 1px solid var(--topbar-border);
    padding: 0 8px;
}

.topbar .toolbar-button {
    color: var(--topbar-text);
    background: transparent;
    border: 1px solid var(--topbar-border);
}

.topbar .toolbar-button:hover {
    background-color: var(--topbar-hover);
}

/* Main Content Layout - Light Theme */
.main-content {
    display: grid;
    grid-template-columns: minmax(200px, 20%) 1fr minmax(200px, 20%);
    height: calc(100vh - 40px);
    /* Subtract topbar height */
    background-color: var(--app-bg);
}

.treeview {
    background: var(--app-bg);
    color: var(--app-text);
}

.treeview-toolbar {
    padding: 8px;
    background-color: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
}

.tree-node {
    color: var(--app-text);
}

.node-content:hover {
    background-color: var(--hover-bg);
}

.node-content.selected {
    background-color: var(--primary-color);
    color: white;
}

/* Center Panel */
.center-panel {
    display: grid;
    grid-template-rows: 1fr auto;
    background-color: var(--app-bg);
}

/* Editor Tabs */
.tabs {
    display: flex;
    background-color: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
}

.tab {
    padding: 8px 16px;
    background-color: var(--app-bg);
    border: 1px solid var(--border-color);
    border-bottom: none;
    margin-right: 2px;
    cursor: pointer;
    color: var(--app-text);
}

.tab.active {
    background-color: var(--app-bg);
    border-bottom-color: var(--app-bg);
}

/* Bottom Panel */
.bottom-panel {
    height: 200px;
    background-color: var(--panel-bg);
    border-top: 1px solid var(--border-color);
    overflow: auto;
    resize: vertical;
}

/* Right Panel */
.right-panel {
    background-color: var(--panel-bg);
    border-left: 1px solid var(--border-color);
    overflow: auto;
    resize: horizontal;
}

/* Context Menu - Light Theme */
.context-menu {
    background: var(--app-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.context-menu .menu-item {
    color: var(--app-text);
}

.context-menu .menu-item:hover {
    background-color: var(--hover-bg);
    color: black;
}

/* Modal Dialog - Light Theme */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background: var(--app-bg);
    border: 1px solid var(--border-color);
    color: var(--app-text);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
}

.modal-input {
    background: var(--app-bg);
    border: 1px solid var(--border-color);
    color: var(--app-text);
}

/* Icons */
.node-icon svg {
    stroke: currentColor;
}

/* Layout and Panel Styles */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.left-panel {
    position: relative;
    min-width: 200px;
    width: 300px;
    max-width: 50vw;
    background: var(--app-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
}

.center-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 300px;
    position: relative;
}

.right-panel {
    position: relative;
    min-width: 200px;
    width: 300px;
    max-width: 50vw;
    background: var(--panel-bg);
    border-left: 1px solid var(--border-color);
    display: flex;
}

.editor-area {
    flex: 1;
    overflow: auto;
}

.bottom-panel {
    height: 200px;
    min-height: 100px;
    max-height: 80vh;
    background: var(--panel-bg);
    border-top: 1px solid var(--border-color);
    overflow: auto;
}

/* Resize Handles */
.resize-handle {
    position: absolute;
    z-index: 1;
}

.resize-handle-right {
    cursor: col-resize;
    width: 4px;
    right: -2px;
    top: 0;
    bottom: 0;
    background: transparent;
    transition: background-color 0.2s;
}

.resize-handle-left {
    cursor: col-resize;
    width: 4px;
    left: -2px;
    top: 0;
    bottom: 0;
    background: transparent;
    transition: background-color 0.2s;
}

.resize-handle-horizontal {
    cursor: row-resize;
    height: 4px;
    left: 0;
    right: 0;
    bottom: 200px;
    /* Same as bottom-panel initial height */
    background: transparent;
    transition: background-color 0.2s;
}

.resize-handle:hover {
    background: var(--primary-color);
}

.resize-active {
    background: var(--primary-color);
}

#module-menu-container {
    width: 100%;
}

/* TopBar Layout */
.topbar {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    height: 40px;
    background-color: var(--topbar-bg, #1a1a1a);
    color: var(--topbar-text, #ffffff);
    border-bottom: 1px solid var(--topbar-border, #404040);
    padding: 0 8px;
}

/* Left Menu Group */
.menu-group {
    display: flex;
    align-items: center;
    gap: 2px;
}

.menu-button {
    padding: 0 12px;
    height: 40px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 13px;
}

.menu-button:hover {
    background-color: var(--topbar-hover, #333333);
}

/* Menu Dropdowns */
.menu-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--topbar-bg, #1a1a1a);
    border: 1px solid var(--topbar-border, #404040);
    min-width: 220px;
    z-index: 1000;
}

.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 6px 12px;
    background: none;
    border: none;
    color: white;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
}

.menu-item:hover {
    background-color: var(--primary-color, #6610f2);
}

/* Center Action Buttons */
.action-buttons {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px;
    border-radius: 4px;
    margin: 0 auto;
}

.icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 4px;
}

.icon-button:hover {
    background-color: var(--topbar-hover, #333333);
}

/* Submenu */
.submenu {
    position: relative;
}

.submenu-content {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background-color: var(--topbar-bg, #1a1a1a);
    border: 1px solid var(--topbar-border, #404040);
    min-width: 220px;
}

/* Shortcuts */
.shortcut {
    color: #9ca3af;
    font-size: 12px;
    margin-left: 16px;
}

/* Separator */
.separator {
    height: 1px;
    background-color: var(--topbar-border, #404040);
    margin: 4px 0;
}

/* Avatar */
.avatar-button {
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--topbar-hover, #333333);
}

/* Right-aligned menu content */
.menu-content-right {
    left: auto;
    right: 0;
    top: 48px;
}

/** Tab Systems **/
/* Add to your app.css */
.tab {
    position: relative;
    padding-right: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab.loading::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid #6610f2;
    border-top: 2px solid transparent;
    border-radius: 50%;
    margin-left: 8px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.tab-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tab-close {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #666;
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 3px;
    opacity: 0.7;
}

.tab-close:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: #000;
    opacity: 1;
}

.tab.error {
    background-color: rgba(220, 38, 38, 0.1);
}

.tab.error .tab-title::after {
    content: '⚠';
    color: #dc2626;
    margin-left: 8px;
}

#workflow-container,
#mindmap-container {
    display: none;
    width: 100%;
    height: 100%;
}

#editor-area {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tab-content {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.tab-pane {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.tabs {
    display: flex;
    background: #f0f0f0;
    border-bottom: 1px solid #ddd;
    padding: 8px 8px 0 8px;
}

.tab {
    padding: 8px 24px 8px 12px;
    background: #e0e0e0;
    border: 1px solid #ccc;
    border-bottom: none;
    margin-right: 4px;
    border-radius: 4px 4px 0 0;
    position: relative;
    cursor: pointer;
}

.tab.active {
    background: white;
    border-bottom-color: white;
    margin-bottom: -1px;
}

.tab-close {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    opacity: 0.5;
}

.tab-close:hover {
    opacity: 1;
}

.tab-content {
    flex: 1;
    background: white;
    position: relative;
}

.tab-pane {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
}

.tab-pane.active {
    display: block;
}

/* Workflow Engine */
.palette-background {
    background-color: #f5f5f5;
}

.workflow-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.workflow-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.tab-pane {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    overflow-y: scroll;
}

/* Make sure SVG fills the container */
.workflow-container svg {
    width: 100%;
    height: 100%;
    display: block;
}

.palette-background {
    fill: #ffffff;
    stroke: #e0e0e0;
    stroke-width: 1px;
}

.palette-item text {
    fill: #333333;
    font-size: 10px;
}

.palette-item:hover .palette-background {
    fill: #f5f5f5;
}

/* Domain Driven Designer */
.dda-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.circle {
    fill: rgba(240, 200, 255, 0.5);
    stroke: #bc4ae2;
    stroke-width: 2px;
}

.draggable-user, .resize-handle {
    cursor: move;
}

.user-icon {
    fill: #555;
}

.domain-name, .user-name {
    font-size: 14px;
    fill: #333;
    text-anchor: middle;
    cursor: pointer;
    dominant-baseline: text-before-edge;
}

.resize-handle {
    fill: white;
    stroke: #4a90e2;
    stroke-width: 2px;
}

.toolbox {
    fill: #f5f5f5;
    stroke: #ddd;
    stroke-width: 1px;
}

.toolbox-item {
    cursor: grab;
}

.toolbox-label {
    font-size: 12px;
    fill: #666;
    text-anchor: middle;
}

.name-input {
    position: absolute;
    text-align: center;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 14px;
    border: 1px solid #4a90e2;
    padding: 2px;
}

.domain {
    cursor: move;
}

#editor-tutorial {
    position: absolute;
    top: 150px;
    right: 50px;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 24px;
    font-weight: 600;
}

#editor-area,
.editor-area {
    color: #000;
}

.node-content {
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    color: black;
    transition: background-color 0.2s ease;
}

.node-content:hover {
    background-color: var(--selection-hover);
}

.node-content.selected {
    background-color: var(--selection-color);
}

.node-content.selected .node-name,
.node-content.selected .toggle-button,
.node-content.selected .node-icon svg {
    color: white;
    stroke: white;
}

/* Update tree node hover states */
.tree-node:hover .node-name {
    background-color: var(--selection-hover);
}

.node-content.selected:hover .node-name {
    background-color: var(--selection-color);
}

/* Ensure icons maintain correct colors */
.node-icon svg {
    stroke: currentColor;
    transition: stroke 0.2s ease;
}

/* Keep other tree view styles */
.tree-node {
    margin: 2px 0;
    color: black;
}

.node-name {
    padding: 2px 4px;
    border-radius: 3px;
    margin-left: 4px;
    -webkit-user-select: none;
    transition: background-color 0.2s ease;
}