/* Pattern Tree JSTree Custom Styles - Figma Design */

.pattern-tree-custom {
  @apply font-pretendard;
  padding: 8px 0 !important;
  overflow: hidden; /* 트리 하이라이트가 사이드바 밖으로 넘어가지 않게 */
}

.jstree-default .jstree-anchor {
  width: 100% !important;
}

.pattern-tree-custom .jstree-default .jstree-anchor {
  @apply border-none bg-transparent text-left rounded-none;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  line-height: normal !important;
  padding: 6px 0 !important;
  margin-left: 0 !important;
  min-width: 100% !important;
  line-height: 24px !important;
  height: 24px !important;
}

.pattern-tree-custom .jstree-default .jstree-anchor:hover {
  @apply bg-Gray-5 rounded;
  background-color: #f7f8f9 !important;
}

.pattern-tree-custom .jstree-default .jstree-clicked {
  @apply bg-Gray-5 rounded;
  background-color: #f7f8f9 !important;
  box-shadow: none !important;
  border: none !important;
}

.pattern-tree-custom .jstree-default .jstree-node {
  /* @apply m-0; */
  min-height: 24px !important;
  line-height: 24px !important;
  margin: 2px 0 !important;
  padding: 4px !important;
}

/* 최강 우선순위 - JSTree 기본 스타일 완전 오버라이드 */
.pattern-tree-custom.jstree .jstree-default .jstree-node,
.pattern-tree-custom .jstree-default .jstree-node,
.pattern-tree-custom .jstree-node {
  min-height: 24px !important;
  line-height: 24px !important;
  /* margin: 2px 0 !important; */
  padding: 4px !important;
}

/* JSTree 화살표 완전 제거 - 모든 가능한 셀렉터 */
.pattern-tree-custom .jstree-ocl,
.pattern-tree-custom .jstree-icon,
.pattern-tree-custom .jstree-themeicon,
.pattern-tree-custom i.jstree-icon,
.pattern-tree-custom i.jstree-ocl,
.pattern-tree-custom ins.jstree-icon,
.pattern-tree-custom .jstree-opener,
.pattern-tree-custom .jstree-node > .jstree-ocl,
.pattern-tree-custom li > .jstree-ocl,
.pattern-tree-custom .jstree-closed > .jstree-ocl,
.pattern-tree-custom .jstree-open > .jstree-ocl,
.pattern-tree-custom .jstree-leaf > .jstree-ocl {
  display: none !important;
  visibility: hidden !important;
  width: 0px !important;
  height: 0px !important;
  margin: 0px !important;
  padding: 0px !important;
  border: none !important;
  background: none !important;
  content: none !important;
  font-size: 0px !important;
  line-height: 0px !important;
  overflow: hidden !important;
}

/* 폴더/패턴 노드 간격 조정 */
.pattern-tree-custom .jstree-default li {
  @apply my-0;
  margin: 1px 0 !important;
  min-height: auto !important;
  width: 100% !important;
  display: block !important;
}

.pattern-tree-custom .jstree-default ul {
  padding-left: 16px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 루트 레벨 ul - 들여쓰기 제거 */
.pattern-tree-custom .jstree-default > ul {
  padding-left: 0 !important;
  margin: 0 !important;
}

/* 드래그 앤 드롭 스타일 */
.pattern-tree-custom .jstree-default .jstree-hovered {
  @apply bg-Gray-5 rounded;
  background-color: #f7f8f9 !important;
}

/* jstree-wholerow hover 스타일 */
.pattern-tree-custom .jstree-wholerow {
  @apply bg-transparent;
}

.pattern-tree-custom .jstree-wholerow:hover {
  @apply bg-Gray-5 rounded;
  background-color: #f7f8f9 !important;
}

/* 선택된 노드 스타일 - Gray-5 배경 */
.pattern-tree-custom .jstree-default .jstree-anchor.jstree-clicked {
  @apply bg-Gray-5 rounded;
  background-color: #f7f8f9 !important;
}

/* JSTree 기본 파란색 테마 완전 제거 - 더 강력한 선택자 사용 */
.pattern-tree-custom.jstree .jstree-default .jstree-anchor.jstree-clicked,
.pattern-tree-custom.jstree .jstree-default .jstree-clicked,
.pattern-tree-custom .jstree-anchor.jstree-clicked,
.pattern-tree-custom .jstree-clicked,
.pattern-tree-custom .jstree-default .jstree-anchor:focus,
.pattern-tree-custom .jstree-default .jstree-anchor:active {
  background: #f7f8f9 !important;
  background-color: #f7f8f9 !important;
  color: inherit !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}

.pattern-tree-custom.jstree .jstree-default .jstree-hovered,
.pattern-tree-custom .jstree-hovered,
.pattern-tree-custom .jstree-default .jstree-anchor:hover {
  background: #f7f8f9 !important;
  background-color: #f7f8f9 !important;
  color: inherit !important;
}

/* JSTree 기본 여백 제거 */
.pattern-tree-custom .jstree-default {
  line-height: normal !important;
}

/* 모든 JSTree pseudo-elements 제거 */
.pattern-tree-custom .jstree-default *:before,
.pattern-tree-custom .jstree-default *:after {
  content: none !important;
}

/* 앵커 요소가 컨테이너 왼쪽 가장자리에서 시작하도록 */
/* .pattern-tree-custom .jstree-default .jstree-anchor {
  margin-left: 0 !important;
  padding-left: 0 !important;
} */

/* 노드 콘텐츠 영역 */
.pattern-tree-custom .jstree-default .jstree-anchor > * {
  vertical-align: middle;
}

/* 내부 div 요소들 높이 조정 */
.pattern-tree-custom .jstree-default .jstree-anchor > div,
.pattern-tree-custom .jstree-anchor > div {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important; /* 텍스트가 버튼 앞까지 확장되도록 */
}

/* Whiterow 플러그인 스타일 오버라이드 */
.pattern-tree-custom .jstree-default .jstree-wholerow {
  height: auto !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* wholerow 컨테이너가 사이드바 너비를 넘지 않도록 강제 */
.pattern-tree-custom .jstree-wholerow-ul {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.pattern-tree-custom.jstree .jstree-default .jstree-wholerow-hovered,
.pattern-tree-custom .jstree-wholerow-hovered {
  background: #f7f8f9 !important;
  background-color: #f7f8f9 !important;
  height: 32px !important;
  border-radius: 4px;
}

.pattern-tree-custom.jstree .jstree-default .jstree-wholerow-clicked,
.pattern-tree-custom .jstree-wholerow-clicked {
  background: #f7f8f9 !important;
  background-color: #f7f8f9 !important;
  border-radius: 4px;
  height: 32px !important;
}

/* 최강 오버라이드 - JSTree 기본 테마 완전 차단 */
div.pattern-tree-custom li.jstree-node a.jstree-anchor.jstree-clicked,
div.pattern-tree-custom li.jstree-node a.jstree-anchor:hover,
div.pattern-tree-custom li.jstree-node a.jstree-anchor:focus,
div.pattern-tree-custom li.jstree-node a.jstree-anchor:active,
.pattern-tree-custom li a.jstree-anchor.jstree-clicked,
.pattern-tree-custom li a.jstree-anchor:hover,
.pattern-tree-custom li a.jstree-anchor:focus {
  background: #f7f8f9 !important;
  background-color: #f7f8f9 !important;
  color: #1f2937 !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}

/* jsTree 기본 DND 마커 숨기기 */
.jstree-marker {
  display: none !important;
  visibility: hidden !important;
}

.jstree-default .jstree-marker {
  display: none !important;
  visibility: hidden !important;
}

/* 커스텀 DND 마커 - 화살표 디자인 */
.jstree-default .jstree-dnd-parent,
.jstree-default .jstree-dnd-icon {
  display: inline-block !important;
}

/* .jstree-default .jstree-dnd-icon {
  color: #1d4ed8;
} */

/* 기본 jsTree 마커는 숨기고 커스텀 화살표만 표시 */
#jstree-marker {
  position: absolute !important;
  z-index: 99999 !important;
  height: 0 !important;
  width: 0 !important;
  background: transparent !important;
  border: none !important;
  display: block !important;
}

#jstree-marker:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #1d4ed8;
}

/* 기본 jsTree 배경 라인만 숨김 */
.jstree-marker {
  background: transparent !important;
}

.vakata-dnd,
.vakata-dnd * {
  z-index: 99999 !important;
}

/* ================================
   Recipe & Folder Add Icon Buttons
   ================================
   Note: PixiJS 전역 CSS 충돌 방지를 위한 스타일
   pixi-workspace/main.css의 전역 button 선택자가 스코프로 제한되었으므로
   !important는 최소한으로만 사용
   ================================ */

/* 아이콘 버튼 기본 스타일 */
.recipe-add-icon-btn,
.folder-add-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.2s ease;
  box-shadow: none;
  border-radius: 0;
  outline: none;
  width: auto;
  height: auto;
  min-width: auto;
  min-height: auto;
  flex-shrink: 0;
}

/* 호버 효과 */
.recipe-add-icon-btn:hover,
.folder-add-icon-btn:hover {
  opacity: 0.7;
  background: transparent;
  transform: none;
}

/* 포커스 효과 */
.recipe-add-icon-btn:focus,
.folder-add-icon-btn:focus {
  outline: none;
  box-shadow: none;
}

/* SVG 스타일 */
.recipe-add-icon-btn svg,
.folder-add-icon-btn svg {
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}

/* SVG path 색상 */
.recipe-add-icon-btn svg path,
.folder-add-icon-btn svg path {
  fill: #58616A;
}

/* Rect 색상 (폴더 아이콘용) */
.folder-add-icon-btn svg rect {
  fill: white;
  stroke: #58616A;
}