/* son-tree-dropdown.css */

:root {
  --son-dropdown-border: rgba(255, 255, 255, 0.8); /* 라이트 모드용 기본 테두리 */
}

[data-bs-theme="dark"] {
  --son-dropdown-border: rgba(255, 255, 255, 0.4); /* 다크 모드용 테두리 */
}


/* ---------- 트리 컨테이너 ---------- */
.son-tree             { font-size: 14px; user-select: none; }
.son-tree .tree-level { width: 100%; }

.son-tree .list-group-item {
  box-sizing      : border-box      ;
  padding         : 2px 2px 2px 1px ;
  width           : 100%    ;
  cursor          : pointer ;
  border          : none    ;
  display         : flex    ;
  align-items     : center  ;
  min-width       : 0       ;   /* 이게 없으면 글자가 좌로 밀린다, overflow 가 작동하여도 밀린다 */
  background      : var(--theme-son-tree-bg) ;
  color           : var(--theme-son-tree-text) ;
  transition      : background 0.2s, color 0.2s ;

}

[data-bs-theme="dark"] .son-tree .list-group-item {
  background      : var(--theme-son-tree-bg-dark) ;  
  color           : var(--theme-son-tree-text-dark) ;
}

.son-tree .list-group-item.selected,
.son-tree .list-group-item:has(input[type="radio"]:checked) {
  background-color : var(--theme-son-tree-select) !important ;
  color            : color-contrast(var(--theme-son-tree-select) vs white, black) !important ;
}

[data-bs-theme="dark"] .son-tree .list-group-item.selected,
[data-bs-theme="dark"] .son-tree .list-group-item:has(input[type="radio"]:checked) {
  background-color : var(--theme-son-tree-select-dark) !important ;  
  color            : color-contrast(var(--theme-son-tree-select-dark) vs white, black) !important ;
}

.son-tree .list-group-item:hover {
  background-color : var(--theme-son-tree-hover) !important ;
  color            : color-contrast(var(--theme-son-tree-hover) vs white, black) !important ;
}

[data-bs-theme="dark"] .son-tree .list-group-item:hover {
  background-color : var(--theme-son-tree-hover-dark) !important ; 
  color            : color-contrast(var(--theme-son-tree-hover-dark) vs white, black) !important ;
}

/* ---------- 트리 내부 요소 ---------- */
.son-tree .tree-arrow {
  width          : 1em ;
  text-align     : center ;
  display        : inline-block ;
  cursor         : pointer ;
}

.son-tree .tree-name {
  flex          : 0 0 auto;      /* flex-grow 0, flex-shrink 0 */ 
  min-width     : 0 ;
  white-space   : nowrap ;
/*  text-overflow  : ellipsis ;  갯수를나타내야 하기때문에 사용하면 안됨*/
}

.son-tree .tree-ellipsis {
  opacity        : 0 ;
  cursor         : pointer ;
  transition     : opacity 0.2s ease-in-out ;
  font-weight    : bold ;
  margin-left    : 4px ;
}

.son-tree .list-group-item:hover .tree-ellipsis {
  opacity        : 1 ;
}

.son-tree .three-dot {
  pointer-events : auto ;
  z-index        : 10 ;
  opacity        : 0 ;
  cursor         : pointer ;
  transition     : opacity 0.2s ease-in-out ;
  margin-left    : 4px ;
}

.son-tree .list-group-item:hover .three-dot {
  opacity        : 1 ;
}



/* ---------- 드롭다운 메뉴 ---------- */
.son-dropdown-menu {
  padding         : 0.2rem  0 ;
  border-radius   : 0.375rem ;
  min-width       : 120px ;
  box-shadow      : 0 6px 18px rgba(0,0,0,0.12) ;
  font-size       : 0.85rem ;
  position        : fixed ;
  display         : none ;
  z-index         : 999999 ;
  background-color: var(--bs-dark , #212529) ; 
  color           : var(--bs-light, #f8f9fa) ;
  border          : 1px solid var(--son-dropdown-border);
}

.son-dropdown-menu .dropdown-item {
  padding          : 3px 6px ;
  display          : flex    ;
  align-items      : center  ;
  border           : none    ;
  width            : 100%    ;
/* min-width        : 0       ;   */
  text-align       : left    ;
  gap              : 0.3rem  ;
  cursor           : pointer ;
  color            : var(--bs-light, #f8f9fa) ;
  background-color : transparent ;
}

.son-dropdown-menu .dropdown-item:hover {
  background-color : var(--bs-secondary-bg, #3a3d42) !important ;
  color            : var(--bs-light, #ffffff) !important ;
}

.son-dropdown-menu .ctx-icon {
  width          : 18px ;
  display        : inline-flex ;
  justify-content: center ;
  align-items    : center ;
  flex           : 0 0 18px ;
}

.son-dropdown-menu .ctx-label {
  white-space    : nowrap ;
  overflow       : hidden ;
  text-overflow  : ellipsis ;
}

.son-dropdown-menu .ctx-shortcut {
  font-size      : 0.75rem ;
  color          : #c1c1c1 ;
  flex           : 0 0 auto ;
  margin-left    : 8px ;
}

.son-dropdown-menu .dropdown-divider {
  margin         : 4px 0 ;
  border-top     : 1px solid rgba(255,255,255,0.1) ;
}

/* 2차 메뉴 */
.son-dropdown-menu .dropdown-item.has-submenu::after {
  content        : "▶" !important ;
  margin-left    : auto ;
  font-size      : 0.7rem ;
  opacity        : 0.7 ;
  display        : inline-block ;
}

.son-dropdown-submenu {
  position        : absolute ;
  left            : 100% ;
  top             : 0 ;
  display         : none ;
  min-width       : 140px ;
  padding         : 0.25rem 0 ;
  background-color: var(--bs-dark, #212529) ;
  border-radius   : 0.375rem ;
  box-shadow      : 0 4px 10px rgba(0,0,0,0.2) ;
  z-index         : 1000000 ;
}

.dropdown-item.has-submenu:hover > .son-dropdown-submenu {
  display         : block ;
}