.material-symbols-rounded {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

:host {
  --tree-accent: #1579C6;
  --tree-selected-bg: #E7E7E7;
  --indent: 36px;
  --accent-gap: 46px;
  --accent-width: 6px;
  --tree-left-edge-shift: 0px;
  --leaf-accent-offset: 48px;
}

.drag-drop-placeholder-row {
  background-color: #DBEAFE;
  padding: 5px;
  border: 2px dashed #3B82F6;
  border-radius: 1px;
  width: 100%;
}

.ghost-image-at-top {
  background-color: #DBEAFE;
  padding: 8px 12px;
  border: 2px dashed #3B82F6;
  border-radius: 4px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.8;
  margin-bottom: 4px;
}
.ghost-image-at-top .ghost-drag-handle {
  opacity: 0.6;
  width: 16px;
  height: 16px;
}
.ghost-image-at-top .ghost-text {
  color: #3B82F6;
  font-weight: 400;
  font-size: 14px;
}

.drag_drop_success_fade {
  transition: background-color 1s linear;
}

.inline-tree-item > .drag-drop-placeholder-row > .treeLeaf {
  text-align: center;
  padding: 10px 0px;
}

.placeholder-text {
  color: #3B82F6;
  width: 100%;
  font-weight: 400;
  text-align: center;
  padding: 8px;
}

.drop-not-allowed-placeholder-row {
  background-color: #FFF1F2;
  padding: 5px;
  border: 2px dashed #FCA5A5;
  border-radius: 1px;
  width: 100%;
}

.drop-not-allowed-text {
  color: #DC2626;
  width: 100%;
  font-weight: 400;
  text-align: center;
  padding: 8px;
}

.is-being-dragged {
  background-color: rgba(125, 130, 138, 0.05) !important;
}

.drag-handle-container {
  height: 100%;
}

.tree-node {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  height: 54px;
}

.tree-view-element > ul {
  margin: 0;
  padding: 0;
}
.tree-view-element ul {
  padding-left: var(--indent);
}
.tree-view-element ul li {
  list-style: none;
}
.tree-view-element ul li.selected-group {
  position: relative;
  /* Remove default accent bars */
  /* Highlight the selected group header */
  /* Children / nested groups remain default visual style */
}
.tree-view-element ul li.selected-group::before, .tree-view-element ul li.selected-group::after {
  display: none;
}
.tree-view-element ul li.selected-group > li.inline-tree-item.element-row.tree-node {
  background-color: var(--tree-selected-bg) !important;
  position: relative;
}
.tree-view-element ul li.selected-group > li.inline-tree-item.element-row.tree-node::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--accent-width);
  left: calc(-1 * (var(--accent-gap) + var(--level, 0) * var(--indent)));
  background-color: var(--tree-accent);
  z-index: 5;
}
.tree-view-element ul li.selected-group > ul li.inline-tree-item.element-row.tree-node {
  background-color: #F9F9F9 !important;
}
.tree-view-element ul li.selected-group > ul li.inline-tree-item.element-row.tree-node::after {
  display: none !important;
}
.tree-view-element ul li.inline-tree-item {
  display: flex;
  align-items: center;
}
.tree-view-element ul li.inline-tree-item .element {
  display: flex;
  width: 100%;
  padding-left: 8px;
  align-items: center;
}
.tree-view-element ul li.inline-tree-item .element .padding-icon {
  padding: 6px;
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (hover: hover) {
  .tree-view-element ul li.inline-tree-item.element-row.rowHover:hover:not(.rowSelected) {
    cursor: pointer;
  }
  .tree-view-element ul li.inline-tree-item.element-row.rowHover:hover:not(.rowSelected)::before {
    background-color: rgba(17, 17, 17, 0.05);
    z-index: 3;
  }
  .tree-view-element ul li.inline-tree-item.element-row.rowHover:hover.rowSelected::before {
    background-color: rgba(17, 17, 17, 0.15);
    z-index: 3;
  }
}
.tree-view-element ul li.inline-tree-item.precedes_drag_drop::before {
  content: "";
  position: absolute;
  left: -50%;
  bottom: 0;
  right: 0;
  border-bottom: 1px solid #3B82F6 !important;
}
.tree-view-element ul li.inline-tree-item.element-row {
  font-family: "Roboto", serif;
  font-size: 16px;
  padding: 15px 0px;
  position: relative;
  color: #212121 !important;
  /* Apply the same selected background for both groups and leaves */
  /* keep blue accent for selected group nodes (left bar) */
  /* add blue accent for selected rows that are NOT group nodes (leaf/activity rows)
     Position accent bar to align with the icon */
}
.tree-view-element ul li.inline-tree-item.element-row::before {
  content: "";
  position: absolute;
  left: -50%;
  bottom: 0;
  right: 0;
  border-bottom: 1px solid #d5d5d5;
  pointer-events: none;
}
.tree-view-element ul li.inline-tree-item.element-row.tree-node::before {
  height: 51px;
  z-index: 2;
  background-color: #F9F9F9;
}
.tree-view-element ul li.inline-tree-item.element-row.tree-node * {
  z-index: 3;
}
.tree-view-element ul li.inline-tree-item.element-row .treeNode {
  width: 100%;
  font-weight: 500;
  color: #212121;
}
.tree-view-element ul li.inline-tree-item.element-row .treeLeaf {
  width: 100%;
  font-weight: 400;
  color: #212121 !important;
}
.tree-view-element ul li.inline-tree-item.element-row.rowSelected {
  background-color: var(--tree-selected-bg) !important;
  /* also paint the ::before (border area) so the row looks fully filled */
}
.tree-view-element ul li.inline-tree-item.element-row.rowSelected::before {
  background-color: var(--tree-selected-bg) !important;
}
.tree-view-element ul li.inline-tree-item.element-row.rowSelected .treeLeaf,
.tree-view-element ul li.inline-tree-item.element-row.rowSelected .treeNode {
  color: #212121 !important;
}
.tree-view-element ul li.inline-tree-item.element-row.tree-node.rowSelected {
  position: relative;
}
.tree-view-element ul li.inline-tree-item.element-row.tree-node.rowSelected::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--accent-width);
  left: calc(-1 * (var(--accent-gap) + var(--level, 0) * var(--indent)));
  background-color: var(--tree-accent);
  z-index: 5;
}
.tree-view-element ul li.inline-tree-item.element-row.rowSelected:not(.tree-node) {
  position: relative;
}
.tree-view-element ul li.inline-tree-item.element-row.rowSelected:not(.tree-node)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--accent-width);
  background-color: var(--tree-accent);
  z-index: 5;
}
.tree-view-element ul li.inline-tree-item.element-row.rowSelected:not(.tree-node)[data-has-drag-handle=true] {
  --drag-handle-offset: 34px;
}
.tree-view-element ul li.inline-tree-item.element-row.rowSelected:not(.tree-node)[data-has-checkbox=true] {
  --checkbox-offset: 36px;
}
.tree-view-element ul li.inline-tree-item.element-row .drag-handle {
  margin-right: 10px;
  cursor: grab;
}
.tree-view-element ul li.inline-tree-item.element-row.rowSelected .drag-handle {
  margin-left: 10px;
}

@media (forced-colors: active) {
  .tree-view-element ul li.selected-group li.inline-tree-item.element-row.tree-node::after {
    background: CanvasText;
  }

  .tree-view-element ul li.selected-group::after {
    background: Highlight;
  }

  /* ensure forced-colors highlights selected rows */
  .tree-view-element ul li.inline-tree-item.element-row.rowSelected {
    background: Highlight !important;
  }
}
.inline-tree-item:focus-visible {
  outline: 2px solid var(--tree-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.failed-move-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background-color: #DC2626;
  color: white;
  border-radius: 6px;
  padding: 6px 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: slideInFadeOut 3s ease-in-out;
  width: 280px;
  display: flex;
  justify-content: center;
}

.failed-move-toast-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toast-message {
  white-space: nowrap;
}

.toast-close-button {
  margin-left: 4px;
}

@keyframes slideInFadeOut {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(100%);
  }
  10% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  90% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(100%);
  }
}