/* ========================================================================
   admin/css/folder.css
   ────────────────────────────────────────────────────────────────────────
   SortableJS 기반의 폴더 트리 스타일
   ======================================================================== */

/* ── 1. 전체 리스트 컨테이너 ───────────────────────────────────────────── */
#folder-list,
#folder-list ul {
  list-style: none;
  margin: 0;
  padding-left: 1.5em;
  /* 들여쓰기 + 빈 영역 확보 */
  min-height: 1.5em;
  /* 빈 ul도 드랍 가능 */
}

/* 빈 하위 리스트에도 경계선 표시 (드랍 대상 강조) */
#folder-list ul.nested-list {
  border: 2px solid #555;
  padding: 4px 0;
  margin-left: 1.5em;
}

/* ── 2. 각 아이템 ─────────────────────────────────────────────────────── */
#folder-list li {
  display: flex;
  align-items: center;
  background: #2b2b2b;
  margin: 4px 0;
  padding: 6px 8px;
  border-radius: 4px;
  position: relative;
}

/* ── 3. 드래그 핸들 ──────────────────────────────────────────────────── */
.handle {
  cursor: grab;
  margin-right: 0.5em;
  color: #aaa;
  font-size: 1.1em;
  user-select: none;
}

/* ── 4. 폴더명 ───────────────────────────────────────────────────────── */
.name {
  flex: 1;
  font-size: 1em;
  color: #eee;
}

/* ── 5. 버튼 공통 ─────────────────────────────────────────────────────── */
.edit-btn,
.delete-btn,
.restore-btn,
.create-btn {
  border: none;
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 6px;
  font-size: 0.9em;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

/* 수정 버튼 */
.edit-btn {
  background: #444;
}

.edit-btn:hover {
  background: #5a5;
}

/* 삭제(soft-delete) 버튼 */
.delete-btn {
  background: #a33;
}

.delete-btn:hover {
  background: #8e2a2a;
}

/* 복원 버튼 */
.restore-btn {
  background: #ffa500;
}

.restore-btn:hover {
  background: #e59400;
}

/* 신규 인라인 생성 버튼 */
.create-btn {
  background: #6c8;
}

.create-btn:hover {
  background: #5a7;
}

/* ── 6. 인라인 입력 필드 ───────────────────────────────────────────────── */
.inline-edit,
.inline-create {
  font-size: 1em;
  padding: 2px 4px;
  border: 1px solid #666;
  border-radius: 4px;
  background: #1e1e1e;
  color: #fff;
}

/* inline-create 위치 보정 */
.inline-create {
  margin-left: 0.5em;
}

/* ── 7. 드래그 중 ghost 스타일 ─────────────────────────────────────────── */
.sortable-ghost {
  opacity: 0.5;
}

/* ── 8. soft-deleted(숨김) 스타일 ────────────────────────────────────── */
#folder-list li.deleted {
  opacity: 0.4;
}

#folder-list li.deleted .name {
  text-decoration: line-through;
  color: #888;
}