body {
  font-family: "Inter", sans-serif;
}
.chart-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  max-height: 400px;
}
.node-item-content.selected {
  background-color: #ecfdf5;
  border: 2px solid #14b8a6;
  border-left-width: 6px !important; /* Make the color border thicker when selected */
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.2);
  position: relative;
}

.node-item-content.selected::before {
  content: "📝";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  background: #14b8a6;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  box-shadow: 0 2px 4px rgba(20, 184, 166, 0.3);
}

.node-item-content.selected::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #14b8a6;
}
.node-item-content .node-controls {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.node-item-content:hover .node-controls {
  opacity: 1;
}
.drag-handle {
  cursor: move;
}
.sortable-ghost {
  background: #d1fae5;
  opacity: 0.7;
  border: 2px dashed #10b981;
}
.sortable-drag {
  opacity: 1 !important;
}

/* Allocation Type Tabs */
.allocation-tab {
  background-color: #f8fafc;
  color: #64748b;
  border-right: 1px solid #d1d5db;
}
.allocation-tab:last-child {
  border-right: none;
}
.allocation-tab.active {
  background-color: #14b8a6;
  color: white;
}
.allocation-tab:hover:not(.active) {
  background-color: #e2e8f0;
  color: #475569;
}

/* Enhanced Editor Panel Styling */
#editor-panel {
  transition: all 0.3s ease-in-out;
  transform: translateX(0);
  opacity: 1;
}

#editor-panel.hidden {
  transform: translateX(20px);
  opacity: 0;
  pointer-events: none;
}

#editor-panel:not(.hidden) {
  border: 2px solid #14b8a6;
  box-shadow:
    0 10px 25px rgba(20, 184, 166, 0.15),
    0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
}

#editor-panel:not(.hidden)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #14b8a6, #0d9488, #14b8a6);
  border-radius: 6px 6px 0 0;
}

#editor-panel:not(.hidden) h2 {
  color: #14b8a6;
  position: relative;
  padding-left: 24px;
}

#editor-panel:not(.hidden) h2::before {
  content: "✏️";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
}

/* Enhanced form styling when editor is active */
#editor-panel:not(.hidden) input:focus,
#editor-panel:not(.hidden) select:focus {
  border-color: #14b8a6;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

#editor-panel:not(.hidden) .allocation-tab.active {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  box-shadow: 0 2px 4px rgba(20, 184, 166, 0.3);
}

/* Save button enhancement when editor is active */
#editor-panel:not(.hidden) button[type="submit"] {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
  transform: translateY(0);
  transition: all 0.2s ease;
}

#editor-panel:not(.hidden) button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(20, 184, 166, 0.4);
}

/* Subtle pulse animation for the entire panel when active */
@keyframes editorPulse {
  0%,
  100% {
    box-shadow:
      0 10px 25px rgba(20, 184, 166, 0.15),
      0 4px 6px rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow:
      0 10px 25px rgba(20, 184, 166, 0.25),
      0 4px 6px rgba(0, 0, 0, 0.1);
  }
}

#editor-panel:not(.hidden) {
  animation: editorPulse 3s ease-in-out infinite;
}

/* Selected node animation */
@keyframes selectedNodePulse {
  0%,
  100% {
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.2);
    transform: translateX(4px);
  }
  50% {
    box-shadow: 0 6px 16px rgba(20, 184, 166, 0.3);
    transform: translateX(6px);
  }
}

.node-item-content.selected {
  animation: selectedNodePulse 2s ease-in-out infinite;
}

/* Tree Structure Lines */
#budget-tree-container ul {
  position: relative;
  padding-left: 40px;
}
#budget-tree-container li {
  position: relative;
}
#budget-tree-container li::before,
#budget-tree-container li::after {
  content: "";
  position: absolute;
  left: -12px;
  border-color: #d1d5db; /* coolGray-300 */
}
/* Vertical line */
#budget-tree-container li::before {
  border-left: 1px solid #d1d5db;
  height: 100%;
  top: 0;
  width: 1px;
}
/* Horizontal line */
#budget-tree-container li::after {
  border-top: 1px solid #d1d5db;
  top: 28px; /* Adjust to align with node middle */
  width: 12px;
}
#budget-tree-container li.last-child::before {
  height: 28px; /* Stop vertical line at the node */
}
/* Root items don't need lines */
#budget-tree-container > ul {
  padding-left: 0;
}
#budget-tree-container > ul > li::before,
#budget-tree-container > ul > li::after {
  display: none;
}

/* Improved node content styling */
.node-item-content {
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
}
.node-item-content:hover {
  border-color: #d1d5db;
  border-left-width: 5px; /* Slightly thicker on hover */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transform: translateX(2px); /* Subtle movement on hover */
}
.allocation-info {
  line-height: 1.4;
}

/* Highlight budget tree section when editor is active */
body.editor-active #budget-tree-section {
  position: relative;
}

body.editor-active #budget-tree-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(20, 184, 166, 0.02),
    rgba(20, 184, 166, 0.05)
  );
  border-radius: 8px;
  pointer-events: none;
  z-index: -1;
}